`

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>
分享到:
评论

相关推荐

    java 实现百度搜索框自动补全

    Java 实现百度搜索框自动补全是一个常见的前端与后端交互功能,主要用于提高用户体验,它在用户输入关键字时提供相关的建议列表。这个源码演示了如何利用Ajax技术结合MySQL数据库来实现这一功能。 首先,我们要理解...

    jquery版搜索框自动补全,智能提示,可连接数据库(适用于.net,java,php等多种语言)

    **jQuery版搜索框自动补全与智能提示技术详解** 在网页开发中,为了提供用户友好的界面和便捷的搜索体验,经常会用到搜索框自动补全功能。此功能能够根据用户输入的部分关键词,实时显示出匹配的建议结果,极大地...

    搜索框字段补全js和css

    它负责监听用户的输入事件,当用户在搜索框中输入字符时,JavaScript代码会触发一个函数,该函数通常会发送一个AJAX请求到服务器,查询与输入内容匹配的数据。服务器返回匹配结果后,JavaScript会把这些结果显示在...

    仿谷歌百度实现输入自动补全功能

    本项目旨在仿照谷歌和百度的样式,实现一个具有高效、易用的输入自动补全功能。 首先,我们要理解自动补全的基本原理。该功能通常基于用户在输入框中键入的部分字符,快速提供可能的匹配项列表。这个过程涉及两个...

    一个仿百度、Google、谷歌搜索引擎自动补全

    搜索引擎自动补全是一种常见于网页搜索框的功能,它能够根据用户输入的部分关键词,实时预测并显示可能的完整搜索词,以此提高搜索效率和用户体验。在本项目中,我们将讨论如何实现一个仿百度、Google、谷歌的搜索...

    自动补全提示(可模糊搜索)的输入框

    本文将深入探讨如何使用JavaScript实现一个具备模糊搜索功能的自动补全提示输入框,根据提供的标题和描述,我们将分析其关键知识点。 首先,自动补全的核心是通过用户输入的部分文字来预测他们可能想要完成的完整...

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

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

    javascript代码自动补全插件

    在使用中,开发者可以实时查看和修改网页元素、分析网络请求、调试JavaScript代码,并且其强大的脚本控制台支持代码自动补全,使得编写和调试JavaScript代码变得更加便捷。 Firebug的自动补全功能包括了内置的...

    autoComplete 文字自动补全demo1

    总结来说,"autoComplete 文字自动补全demo1"是一个利用jQuery插件实现的自动补全功能实例,它展示了如何在前端应用中创建高效、可定制的自动补全输入体验。通过对相关文件的学习,开发者可以深入理解这一功能的实现...

    jQuery+Ajax搜索框输入文字自动补全代码.zip

    《jQuery+Ajax搜索框输入文字自动补全代码详解》 在网页开发中,为了提供更加友好和高效的用户体验,我们常常需要实现搜索框的输入自动补全功能。这使得用户在输入关键字时,系统能实时给出匹配的建议,极大地提高...

    仿搜索引擎文本自动补全

    【标题】"仿搜索引擎文本自动补全"是一个常见的前端功能,它主要应用于输入框中,当用户输入文本时,系统会根据已输入的部分提供相关的建议,以帮助用户快速完成搜索词或输入内容。这一功能在现代网站和应用程序中...

    solr搜索自动补全

    在文档中提到了一个名为suggest.js的插件,它是专门用于实现Solr搜索自动补全的一个JavaScript工具。Suggest.js插件的作用是,在用户开始输入查询词的时候,通过与Solr服务器交互,快速检索出可能的补全词项,并将其...

    Jquery实现仿搜索引擎文本框自动补全插件

    这是一个基于 jQuery 的自动补全插件,它能提供高效的搜索建议,并且可以自定义样式和行为。要使用这个插件,同样需要将其引入到 HTML 中: ```html &lt;script src="jquery.bigautocomplete.js" type="text/...

    extjs 自动补全 模拟combobox

    EXTJS并没有直接提供一个名为"自动补全"的组件,但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们...

    html_js自动补全

    例如,如果你在 JavaScript 中定义了一个对象,然后输入 `.`, 编辑器会根据对象的属性来提供补全建议。 自动补全也有助于代码规范性和一致性。许多编辑器允许用户自定义代码风格,自动补全会按照这些规则插入代码,...

    Ajax实现自动补全和搜索功能(jsp)

    "自动补全和搜索项目实例.rar"可能是一个完整的项目源码,你可以下载后进行学习和调试。"自动补全.rar"可能是一个单独的自动补全功能的实现,可以用于独立研究或整合到其他项目中。 总的来说,这个项目涉及到的知识...

    自动补全插件.rar

    此外,自动补全插件还可以进行一些高级定制,例如设置匹配算法(如模糊搜索)、添加自定义数据属性、控制下拉菜单的显示效果等。这些特性使得插件能够适应各种各样的应用场景,从简单的关键词补全到复杂的查询建议。...

    eclipse自动补全插件

    eclipse中java、javascript、html代码自动补全

    jQuery实现自动补全功能

    在提供的压缩包文件"GoogleSuggest"中,可能包含了一个关于谷歌搜索建议的示例,它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例,你可以更深入地理解如何与服务器...

    servlet+jsp实现百度搜索自动补全功能

    当用户在搜索框中输入字符时,触发一个Ajax请求,将当前输入的文本发送到服务器。 2. **Servlet处理请求**:在服务器端,Servlet接收到来自前端的Ajax请求,包含用户输入的关键词。Servlet解析请求,然后执行相应的...

Global site tag (gtag.js) - Google Analytics