js 仿google搜索
具体应用场景:
var info = "<div id=\"showMessageTableDiv\" style=\"overflow:auto;height:330px\" width='750px'>";
info +="<table>";
info += "<tr> ";
info += "<td><input type=\"text\" id=\"checkLisenceCode\" value='' class=\"txt1 border1\" style=\"position: absolute;left: 60px; top: 45px;padding-left:1px;width:200px;\" onkeyup =\"test()\" /></td>";
info += "</tr>";
info += "<tr>";
info += "<td>";
info += "<div id=\"showmenu\" style=\"position: absolute; width: 200px; height: 100px; z-index: 1; left: 60px; top: 65px;border:1px solid #666666; display:none;\"></div>";
info += "</td>";
info +=" </tr>"
info += "</table>";
info +="</div>";
function test()
{
//这儿待搜索的内容写死了
var wordvalue = document.getElementById("checkLisenceCode").value.toLowerCase();
var alltxt="管理员|apple苹果|all全|big大|bad坏|cut剪切|car车|daph8|eeg|egg|eat|fuck|fuck you|fix|good|hand|hidden|ill|jack|jad|kevin|long|man|number|oio|part|pp|quit|QQ|rest|reg|set|submit|time|tag|uuzo.cn|uuzo|view|windows|want|xy|xun|young|yuyu|zoo|Zzz|锋.David|David|哈哈|www.uuzo.cn|www.uuzo.com";
//可以输入"管"字看看效果
var alltxtpp=alltxt.toLowerCase();
var alltxt_xiang=alltxt.split("|");
var alltxt_xiang1 = alltxtpp.split("|");
var inhtml="<ul>"
var isyou=0;
for (i=0;i<alltxt_xiang1.length;i++)
{
if (alltxt_xiang1[i].substr(0,wordvalue.length)==wordvalue)
{
inhtml = inhtml + "<li onclick=\"document.getElementById('checkLisenceCode').value=this.innerHTML;document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">" + alltxt_xiang[i] + "</li>";
isyou=1;
}
}
inhtml=inhtml+"</ul>";
if (isyou==1)
{
document.getElementById("showmenu").innerHTML=inhtml;
document.getElementById("showmenu").style.display="";
}
else
{
document.getElementById("showmenu").innerHTML="";
{
document.getElementById("showmenu").style.display="none";
}
if (wordvalue=="")
document.getElementById("showmenu").innerHTML="";
document.getElementById("showmenu").style.display="none";
}
}
有需要的可以给我留言,下次我会把完整的源码贴上来
参考资料:http://blog.csdn.net/lai_gb/archive/2009/07/04/4322270.aspx
非常感谢这位同学的资料.
var info = "<div id=\"showMessageTableDiv\" style=\"overflow:auto;height:330px\" width='750px'>";
info +="<table>";
info += "<tr> ";
info += "<td><input type=\"text\" id=\"checkLisenceCode\" value='' class=\"txt1 border1\" style=\"position: absolute;left: 60px; top: 45px;padding-left:1px;width:200px;\" onkeyup =\"test()\" /></td>";
info += "</tr>";
info += "<tr>";
info += "<td>";
info += "<div id=\"showmenu\" style=\"position: absolute; width: 200px; height: 100px; z-index: 1; left: 60px; top: 65px;border:1px solid #666666; display:none;\"></div>";
info += "</td>";
info +=" </tr>"
info += "</table>";
info +="</div>";
function test()
{
//这儿待搜索的内容写死了
var wordvalue = document.getElementById("checkLisenceCode").value.toLowerCase();
var alltxt="管理员|apple苹果|all全|big大|bad坏|cut剪切|car车|daph8|eeg|egg|eat|fuck|fuck you|fix|good|hand|hidden|ill|jack|jad|kevin|long|man|number|oio|part|pp|quit|QQ|rest|reg|set|submit|time|tag|uuzo.cn|uuzo|view|windows|want|xy|xun|young|yuyu|zoo|Zzz|锋.David|David|哈哈|www.uuzo.cn|www.uuzo.com";
//可以输入"管"字看看效果
var alltxtpp=alltxt.toLowerCase();
var alltxt_xiang=alltxt.split("|");
var alltxt_xiang1 = alltxtpp.split("|");
var inhtml="<ul>"
var isyou=0;
for (i=0;i<alltxt_xiang1.length;i++)
{
if (alltxt_xiang1[i].substr(0,wordvalue.length)==wordvalue)
{
inhtml = inhtml + "<li onclick=\"document.getElementById('checkLisenceCode').value=this.innerHTML;document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">" + alltxt_xiang[i] + "</li>";
isyou=1;
}
}
inhtml=inhtml+"</ul>";
if (isyou==1)
{
document.getElementById("showmenu").innerHTML=inhtml;
document.getElementById("showmenu").style.display="";
}
else
{
document.getElementById("showmenu").innerHTML="";
{
document.getElementById("showmenu").style.display="none";
}
if (wordvalue=="")
document.getElementById("showmenu").innerHTML="";
document.getElementById("showmenu").style.display="none";
}
}
有需要的可以给我留言,下次我会把完整的源码贴上来
参考资料:http://blog.csdn.net/lai_gb/archive/2009/07/04/4322270.aspx
非常感谢这位同学的资料.