仿google搜索框下拉提示效果
<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+'" onmousedown=getValue("'+obj.name+'","'+likeArr[i]+'");showAndHide("'+div_name+'","hide"); onmouseover="ggonmouseover(this)" onmouseout="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');" onblur="showAndHide('cor_menu','hide')" ></div>
<div name="cor_menu" id="cor_menu" onfocus="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>
?
