`

javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)

阅读更多
<html>
<body>
<style>
ul,li{margin: 0; padding: 0;width:100%;}
</style>
<script language="javascript" type="text/javascript">
function checkword()
{
   var wordvalue=document.getElementById("word").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('word').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";
   }
}
</script>
<input type="text" name="word" size="20" id="word" onkeyup="checkword()" style="border:1px solid #666666;width:200px;height:25px;">
<div style="position: absolute; width: 200px; height: 100px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div></body></html>
分享到:
评论

相关推荐

    仿照谷歌搜索自动补全功能实验

    在实现自动补全功能时,我们可以创建一个HttpHandler来接收前端发送的用户输入,并返回匹配的关键词列表,这些列表将以JSON格式返回。 处理JSON数据通常涉及以下步骤: 1. 创建数据结构:定义一个对象或数组来存储...

    仿googlesuggest

    【描述】"该程序为仿照google搜索条的特效" 指的是,这个程序不仅实现了基本的自动补全功能,还可能包含了一些谷歌搜索框的视觉效果和用户体验特性。这些特效可能包括:输入框聚焦时的变化,建议列表的动态显示,...

    suggestFramework。仿google输入提示

    Google搜索框的输入提示功能就是一种经典的实现方式,而`suggestFramework`正是一个仿照Google输入提示效果的框架。本文将详细介绍`suggestFramework`的使用方法、核心原理及其实现的细节。 一、框架介绍 `...

    AUTOSUGGEST

    【标题】"AUTOSUGGEST" 是一个JavaScript实现的自动补全功能,它借鉴了Google Suggest的服务模式,通过AJAX技术来动态获取并显示下拉列表中的建议内容。这个功能在网页输入框中非常常见,能提升用户体验,快速帮助...

    google suggest 制作仿照phototype 中的返回接受html而不是字符串

    在IT行业中,Google Suggest是一种常见的自动补全技术,它为用户提供实时的搜索建议,显著提高了用户输入查询的效率。 Phototype 是一个可能的图片处理工具或者设计软件,但在这个场景下,它似乎被用来作为示例,...

Global site tag (gtag.js) - Google Analytics