`
Johnny_GZ
  • 浏览: 179851 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js自动完成

 
阅读更多

<html>
<body>
<style>
ul,li{}{margin: 0; padding: 0;width:100%;}
</style>
<script language="javascript" type="text/javascript">
function autoComplete()
{
   var wordvalue=document.getElementById("word").value.toLowerCase();
   var allVal=['北京', '广州', '郑州', '山西', '陕西'];
   var alltxt="北京|bj|beijing|广州|gz|guangzhou|郑州|zz|zhengzhou|山西|sx|shanxi|陕西|sx|shanxi";
   //var alltxtpp=alltxt.toLowerCase();
   var alltxt_xiang=alltxt.toLowerCase().split("|");//alltxt.split("|");
   //var alltxt_xiang1=alltxtpp.split("|");
   var inhtml="<dl>"
   var isyou=0;
   var resultCount = 0;
   for (i=0;i<alltxt_xiang.length;i=i+3)
   {
       if (alltxt_xiang[i].substring(0,wordvalue.length)==wordvalue || alltxt_xiang[i+1].substring(0,wordvalue.length)==wordvalue || alltxt_xiang[i+2].substring(0,wordvalue.length)==wordvalue)
       //if (alltxt_xiang1[i].indexOf(wordvalue)!=-1)
       {
          var index = parseInt(i/3);
           inhtml=inhtml+"<dt onclick=\"document.getElementById('word').value='"+allVal[index]+"';document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">&nbsp;"+allVal[index]+"</dt>";
           isyou=1;
           resultCount++;
       }
       if(resultCount >= 5) break;
   }
   inhtml=inhtml+"</dl>";
   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="setTimeout(autoComplete,10);" style="border:1px solid #666666;width:200px;height:25px;">
<div style="position: absolute; width: 200px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div>
<br/>
<input type="button" value="Click Me" onclick="window.status = '123'" />
</body></html>

分享到:
评论

相关推荐

    基于JS自动完成容易使用

    1. **JavaScript自动完成**:JavaScript库如jQuery UI、Typeahead.js或Autocomplete.js提供了实现自动完成的基础。这些库通常包括一个输入框监听器,当用户输入时触发请求,并显示返回的建议列表。 2. **PHP接口...

    JS自动完成(JQuery做的)

    `44444.html`可能是示例页面,`jquery-1.3.2.js`是jQuery库的旧版本,而`bb.js`可能是包含自动完成逻辑的JavaScript脚本。 综上所述,利用jQuery实现自动完成功能,主要涉及到Ajax通信、CSS布局以及jQuery的事件...

    JS 自动完成,支持拼音中文插件

    实现JS自动完成功能,我们可以利用jQuery库,这是一个轻量级、高性能的JavaScript库,提供了许多方便的DOM操作和事件处理方法。jQuery使得在不同浏览器间编写兼容的代码变得更加容易。 在JS中实现中文拼音自动完成...

    JavaScript_一个超级小的Javascript自动完成自动建议库零依赖800字节的mingzip.zip

    本文将深入探讨标题所提及的"一个超级小的JavaScript自动完成自动建议库",以及与JavaScript相关的知识点。 标题中的“零依赖800字节的mingzip.zip”可能指的是一个极小型的JavaScript库,专门用于实现自动完成和...

    react-native-autocomplete-input, 纯javascript自动完成输入,用于响应本机.zip

    react-native-autocomplete-input, 纯javascript自动完成输入,用于响应本机 react-native-autocomplete-input 一个纯JS自动完成组件,用于响应本机。 在你自己的项目中使用这里组件,或者将它的用作生成你自己的...

    DIY的JS自动完成的插件

    最近又花了点时间写了个在一般项目中比较常用的插件,就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据,支持能过配置的自定义处观位置与大小的调整;自定义事件触发;自定义请求...

    纯js仿百度自动完成

    面向对象的纯js仿百度自动完成,可以在一个页面内通过创建对象使用多个

    javascript 仿照google自动完成

    通过以上技术,我们可以实现一个功能完善的JavaScript自动完成组件。具体实现过程通常包括创建输入事件监听器,获取输入值,匹配数据源,创建并插入DOM元素,以及处理用户与下拉列表的交互。在实际项目中,可以使用...

    JavaScript自动完成库AutoJS.zip

    AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的,没有任务外部依赖,大小仅仅 6kb。 标签:AutoJS

    实用的轻量级js自动完成autocomplete插件

    在JavaScript的世界里,开发人员经常面临为用户输入提供智能提示或自动补全功能的需求,而 Awesomplete 就是一个非常出色的解决方案。这款轻量级的 autocomplete 插件以其高效和灵活的特性赢得了开发者们的喜爱。...

    自动完成 JS

    【自动完成 JS】技术是前端开发中的重要组成部分,主要用于提高用户输入效率和用户体验。它广泛应用于搜索框、表单输入、代码编辑器等场景,通过预测和建议用户可能要输入的内容,大大减少了用户手动键入的步骤。在...

    EDITPLUS 自动完成JS插件

    "EDITPLUS 自动完成JS插件"是专门为EDITPLUS设计的一个增强工具,用于提升JavaScript开发时的代码编写效率。 该插件的核心特性是自动完成功能,它可以在用户输入代码时提供智能提示,根据上下文显示可能的函数、...

    仿baidu google 输入框自动完成

    【描述】中的"js自动完成",指的是利用JavaScript编程语言实现自动补全功能。"struct1.2+mysql"表明项目中可能使用了Structs 1.2框架和MySQL数据库来处理数据存储和检索。Structs是一个基于MVC模式的Java Web开发...

    js javascript自动编号 编号递增

    在JavaScript编程中,"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能,使得能够自动为带有特定前缀(例如"0X")的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...

    js 自动提示城市

    在“js自动完成城市提示输入”中,核心是监听用户的输入事件,每当用户在输入框中输入字符时,都会触发一个事件。我们可以捕获这个事件,并利用拼音库将用户输入的汉字转换为拼音。然后,我们可以在预先存储的城市...

    JS 自动完成 AutoComplete(Ajax 查询)

    【JS 自动完成 AutoComplete(Ajax 查询)】是前端开发中常见的一种功能,它通过实时获取用户在输入框中输入的字符,利用Ajax技术向服务器发送请求,动态加载并显示匹配的数据,为用户提供便捷的搜索体验。这个功能在...

    atom-autocomplete-threejs:用于Atom编辑器的three.js自动完成

    《Atom编辑器中的Three.js自动完成插件:atom-autocomplete-threejs详解》 在现代Web开发中,JavaScript库和框架的使用越来越广泛,其中Three.js是3D网页开发的首选库之一。为了提高开发效率,许多开发者依赖于代码...

    EDITPLUS 自动完成插件 (JS 含jQuery API)

    总的来说,EDITPLUS的自动完成插件(JS含jQuery API)是一个高效且实用的工具,它能够帮助开发者快速编写JavaScript和jQuery代码,提高开发速度和代码质量。无论是初学者还是经验丰富的专业人士,都能从中受益。通过...

    自动完成JS

    标题“自动完成JS”指的是在JavaScript中实现自动补全或自动建议的功能,这通常用于提升用户在输入框中输入内容时的效率和体验。在Web开发中,这种功能广泛应用于搜索框、表单填写等场景,它能预测并提供用户可能想...

Global site tag (gtag.js) - Google Analytics