仿google搜索框下拉提示效果

最新推荐文章于 2024-04-27 20:39:57 发布

xieronghua246

最新推荐文章于 2024-04-27 20:39:57 发布

阅读量170

点赞数

分类专栏：页面技术文章标签： Google JavaScript XHTML HTML ViewUI

页面技术专栏收录该内容

55 篇文章

订阅专栏

写道

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<script type="text/javascript">
function showAndHide(obj,types)
{
var Layer=window.document.getElementById(obj);
switch(types)
{
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str)
{
var input=window.document.getElementById(obj);
input.value=str;
}

function ggonmouseover(obj)
{
obj.style.background="blue";
obj.style.color="white";
}

function ggonmouseout(obj)
{
obj.style.background="white";
obj.style.color="black";
}

function ggsearch()
{
var arr;
this.init=function(str)
{
arr=str.split(",");
}

this.search=function(key)
{
var resultArr=new Array();
for(var i=0;i<arr.length;i++)
{
if(arr[i].indexOf(key)!=-1)
{
resultArr.push(arr[i]);
}
}
return resultArr;
}
}

var cor_ggsearch=new ggsearch();
cor_ggsearch.init("中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民,中国,中国人民,日本人民");

function search_cor(obj,div_name)
{
var key=obj.value;
if(key=="")
return false;
var likeArr=cor_ggsearch.search(key);
var ihtml='<div style="position: absolute;left:0;top:0;width:100%;height:auto;z-index:1;"><ul style="margin:3px;padding:0">';
var licss='width:100%;height:20px;line-height:20px;font-size:14px;border-bottom:1px dashed #ccc;';
if(likeArr.length!=0)
{
for(var i=0;i<likeArr.length;i++)
{
ihtml=ihtml+'<li style="'+licss+'" οnmοusedοwn=getValue("'+obj.name+'","'+likeArr[i]+'");showAndHide("'+div_name+'","hide"); οnmοuseοver="ggonmouseover(this)" οnmοuseοut="ggonmouseout(this)" >'+likeArr[i]+'</li>';
}
ihtml=ihtml+'</ul></div>';

document.getElementById(div_name).innerHTML=ihtml;
document.getElementById(div_name).style.width=obj.style.width;
showAndHide(div_name,'show');
}
}

</script>
</head>
<body>

受检单位：

<div><input type="text" id="txt" name="txt" style="width:180px" onpropertychange="search_cor(this,'cor_menu');" οnblur="showAndHide('cor_menu','hide')" ></div>
<div name="cor_menu" id="cor_menu" οnfοcus="showAndHide(this.name,'show')" style="position:relative;overflow-y:auto;overflow-x:hidden;height:160px;z-index:1;background:#FFF;border:1px solid #000;SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-SHADOW-COLOR:#919192;SCROLLBAR-3DLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#919192;SCROLLBAR-TRACK-COLOR:#ffffff;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;display:none;">

</div>

</body>
</html>