`
yanghuidang
  • 浏览: 967506 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用js实现输入提示（自动完成）

AjaxjQueryprototypeIE浏览器 
阅读更多

以前也写过一个jQuery的这种插件 ，但是很多地方根本不用jQuery，这个功能也有很多其它库支持，但是为了用这个功能而加载很多js插件，这样效率明显下降了很多，而且这个东西平时也很常用，所以一决心自己写了个相对比较独立的。

完成有以下功能：

  • 输入字符会把以输入字符开头的提示出来。
  • 支持上下方向键选择提示选项，支持循环
  • 支持绑定一个数组提示，支持ajax传递输入框值请求数据。
  • 支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示，互不影响。
  • 支持中文。

      首先是js的核心部分，其各部分都有较详细的说明，代码如下：

view source print ?
001 ;( function (window){
002 /* 插件开始 */
003 var autoComplete= function (o){
004      var handler=( function (){
005          var handler= function (e,o){ return new handler.prototype.init(e,o); }; /* 为每个选择的dom都创建一个相对应的对象，这样选择多个dom时可以很方便地使用 */
006          handler.prototype={
007              e: null , o: null , timer: null , show:0, input: null , popup: null ,
008              init: function (e,o){ /* 设置初始对象 */
009                  this .e=e, this .o=o,
010                  this .input= this .e.getElementsByTagName( this .o.input)[0],
011                  this .popup= this .e.getElementsByTagName( this .o.popup)[0],
012                  this .initEvent(); /* 初始化各种事件 */
013              },
014              match: function (quickExpr,value,source){ /* 生成提示 */
015                  var li = null ;
016                  for ( var i in source){
017                      if ( value.length>0 && quickExpr.exec(source[i])!= null ){
018                          li = document.createElement( 'li' );
019                          li.innerHTML = '<a href="javascript:;">' +source[i]+ '</a>' ;
020                          this .popup.appendChild(li);
021                      }
022                  }
023                  if ( this .popup.getElementsByTagName( 'a' ).length)
024                      this .popup.style.display= 'block' ;
025                  else
026                      this .popup.style.display= 'none' ;
027              },
028              ajax: function (type,url,quickExpr,search){ /* ajax请求远程数据 */
029                  var xhr = window.ActiveXObject ? new ActiveXObject( "Microsoft.XMLHTTP" ) : new XMLHttpRequest();
030                  xhr.open(type,url, true ); /* 同异步在此修改 */
031                  xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
032                  var that= this ;
033                  xhr.onreadystatechange = function (){
034                      if (xhr.readyState==4) {
035                          if (xhr.status==200) {
036                              var data = eval(xhr.responseText);
037                              that.match(quickExpr,search,data); /* 相同于成功的回调函数 */
038                          } else {
039                              alert( "请求页面异常!" ); /* 请求失败 */
040                          }
041                      }
042                  };
043                  xhr.send( null );
044              },
045              fetch: function (ajax,search,quickExpr){
046                  var that= this ;
047                  this .ajax(ajax.type,ajax.url+search,quickExpr,search);
048              },
049              initEvent: function (){ /* 各事件的集合 */
050                  var that= this ;
051                  this .input.onfocus = function (){
052                      if ( this .inputValue) this .value = this .inputValue;
053                      var value= this .value, quickExpr=RegExp( '^' +value, 'i' ), self= this ;
054                      var els = that.popup.getElementsByTagName( 'a' );
055                      if (els.length>0) that.popup.style.display = 'block' ;
056                      that.timer=setInterval( function (){
057                          if (value!=self.value){ /* 判断输入内容是否改变，兼容中文 */
058                              value=self.value;
059                              that.popup.innerHTML= '' ;
060                              if (value!= '' ){
061                                  quickExpr=RegExp( '^' +value);
062                                  if (that.o.source) that.match(quickExpr,value,that.o.source);
063                                  else if (that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
064                              }
065                          }
066                      },200);
067                  };
068                  this .input.onblur = function (){ /*  输入框添加事件 */
069                      if ( this .value!= this .defaultValue) this .inputValue = this .value;
070                      clearInterval(that.timer);
071                      var current=-1; /* 记住当前有焦点的选项 */
072                      var els = that.popup.getElementsByTagName( 'a' );
073                      var len = els.length-1;
074                      var aClick = function (){
075                          that.input.inputValue = this .firstChild.nodeValue;
076                          that.popup.innerHTML= '' ;
077                          that.popup.style.display= 'none' ;
078                          that.input.focus();
079                      };
080                      var aFocus = function (){
081                          for ( var i=len; i>=0; i--){
082                              if ( this .parentNode===that.popup.children[i]){
083                                  current = i;
084                                  break ;
085                              }
086                          }
087                          //that.input.value = this.firstChild.nodeValue;
088                          for ( var k in that.o.elemCSS.focus){
089                              this .style[k] = that.o.elemCSS.focus[k];
090                          }
091                      };
092                      var aBlur= function (){
093                          for ( var k in that.o.elemCSS.blur)
094                              this .style[k] = that.o.elemCSS.blur[k];
095                      };
096                      var aKeydown = function (event){
097                          event = event || window.event; /* 兼容IE */
098                          if (current === len && event.keyCode===9){ /* tab键时popup隐藏 */
099                              that.popup.style.display = 'none' ;
100                          } else if (event.keyCode==40){ /* 处理上下方向键事件方便选择提示的选项 */
101                              current++;
102                              if (current<-1) current=len;
103                              if (current>len){
104                                  current=-1;
105                                  that.input.focus();
106                              } else {
107                                  that.popup.getElementsByTagName( 'a' )[current].focus();
108                              }
109                          } else if (event.keyCode==38){
110                              current--;
111                              if (current==-1){
112                                  that.input.focus();
113                              } else if (current<-1){
114                                  current = len;
115                                  that.popup.getElementsByTagName( 'a' )[current].focus();
116                              } else {
117                                  that.popup.getElementsByTagName( 'a' )[current].focus();
118                              }
119                          }
120                      };
121                      for ( var i=0; i<els.length; i++){ /* 为每个选项添加事件 */
122                          els[i].onclick = aClick;
123                          els[i].onfocus = aFocus;
124                          els[i].onblur = aBlur;
125                          els[i].onkeydown = aKeydown;
126                      }
127                  };
128                  this .input.onkeydown = function (event){
129                      event = event || window.event; /* 兼容IE */
130                      var els = that.popup.getElementsByTagName( 'a' );
131                      if (event.keyCode==40){
132                          if (els[0]) els[0].focus();
133                      } else if (event.keyCode==38){
134                          if (els[els.length-1]) els[els.length-1].focus();
135                      } else if (event.keyCode==9){
136                          if (event.shiftKey== true ) that.popup.style.display = 'none' ;
137                      }
138                  };
139                  this .e.onmouseover = function (){ that.show=1; };
140                  this .e.onmouseout = function (){ that.show=0; };
141                  addEvent.call(document, 'click' , function (){
142                      if (that.show==0){
143                          that.popup.style.display= 'none' ;
144                      }
145                  }); /* 处理提示框dom元素不支持onblur的情况 */
146              }
147          };
148          handler.prototype.init.prototype=handler.prototype; /* JQuery style，这样我们在处的时候就不用每个dom元素都用new来创建对象了 */
149          return handler; /* 把内部的处理函数传到外部 */
150      })();
151      if ( this .length){ /* 处理选择多个dom元素 */
152          for ( var a= this .length-1; a>=0; a--){ /* 调用方法为每个选择的dom生成一个处理对象，使它们不互相影响 */
153              handler( this [a],o);
154          }
155      } else { /* 处理选择一个dom元素 */
156          handler( this ,o);
157      }
158      return this ;
159 };
160 return window.autoComplete = autoComplete; /* 暴露方法给全局对象 */
161 /* 插件结束 */
162 })(window);

 

      其中了一些全局的自定义函数，如addEvent和在例子中将要用到的getElementsByClassName函数如下：

view source print ?
01 var getElementsByClassName = function (searchClass, node, tag) { /* 兼容各浏览器的选择class的方法；(写法参考了博客园：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html ，想了解更多请看这个地址) */
02      node = node || document, tag = tag ? tag.toUpperCase() : "*" ;
03      if (document.getElementsByClassName){ /* 支持getElementsByClassName的浏览器 */
04          var temp = node.getElementsByClassName(searchClass);
05          if (tag== "*" ){
06              return temp;
07          } else {
08              var ret = new Array();
09              for ( var i=0; i<temp.length; i++)
10
2
顶
6
踩
分享到：
| Javascript闭包演示
评论
1 楼 antonyup_2006 2011-03-03  
打成一个包 提供下载咯!呵呵
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java实现输入条件自动提示

    本资源主要介绍了使用Java实现输入条件自动提示的方法，旨在模仿百度输入提示。该资源包括准备工作、实例代码、逻辑处理类、SERVLET类、前台页面等部分，涵盖了输入条件自动提示的所有方面。 准备工作 在开始实现...

    用js实现输入提示(自动完成)的实例代码

    在这份给定文件中，作者提供了一段用JavaScript实现输入提示（自动完成）功能的示例代码。这个功能能够帮助用户在输入信息时，系统自动提供一些匹配的选项供用户选择，以提高输入效率并减少输入错误。 在内容中，...

    纯js实现输入提示自动检索关键字加粗显示

    1，纯js实现输入提示自动检索功能 2，跨浏览器支持，在ie，firebox，chrome,360,傲游 等测试ok 3，不会影响页面原有布局 4，代码干净,简单易懂，方便扩展

    C#dataGridView中输入框自动提示、自动完成、自动补全功能

    在实际应用中，为了提高用户交互体验，我们常常需要为`dataGridView`的输入框添加自动提示、自动完成和自动补全功能。这些功能能够帮助用户更快地找到或输入他们想要的数据，减少错误输入的可能性。 自动提示...

    JS实现自动提示文本框

    在本项目中，"JS实现自动提示文本框"指的是利用JavaScript来创建一个功能，当用户在文本框输入时，能够实时显示与输入内容匹配的提示信息，这种功能常见于搜索框或自动补全输入场景。 要实现这样的功能，首先需要在...

    联想输入 输入框提示 自动完成（php mysql jquery）

    标题 "联想输入 输入框提示 自动完成（php mysql jquery）" 涉及的技术主要集中在前端的用户体验优化和后端的数据交互上。这种功能常见于许多网站和应用程序的搜索框，用户在输入时，系统会根据已输入的部分文字提供...

    jQuery+PHP+Mysql实现输入自动完成提示的功能-关键字加变色

    本教程将探讨如何使用jQuery、PHP和MySQL实现一个输入自动完成提示的功能，并在此基础上增强搜索关键词的展示效果，如变色和首字母大写。首先，让我们逐个了解这些技术的关键点。 jQuery是一个广泛使用的JavaScript...

    AJAX实现google输入自动完成简单模拟.doc

    ### AJAX实现Google输入自动完成简单模拟 #### 一、引言 随着Web应用程序的发展，用户体验变得越来越重要。其中，输入自动完成（Auto Complete）功能在许多网站上得到了广泛应用，能够极大地提升用户的输入效率和...

    Eclipse下javascript开发spket插件实现自定义js的自动提示.pdf

    在本文档中，我们将探讨如何在Eclipse环境中利用Spket插件进行JavaScript开发，特别是如何实现自定义JavaScript函数的自动提示功能。首先，你需要安装Spket插件，一个强大的JavaScript和Ajax开发工具。版本1.6.18是...

    jQuery+PHP+Mysql实现输入自动完成提示的功能

    总结起来，这个项目利用jQuery的`autocomplete`功能和PHP+MySQL的后端处理，提供了一个实时的输入提示功能，提高了用户在搜索或输入数据时的效率。这涉及到前端交互设计、服务器端脚本编写和数据库操作等多个技术...

    输入邮箱自动提示

    此功能基于JavaScript库，如jQuery，通过结合后端服务或者预设的数据源，实现在用户输入邮箱地址时提供即时的下拉提示。在给定的文件列表中，我们可以看到`jquery.min.js`和`jquery.mailAutoComplete-3.1.js`，这...

    jQuery实现文本框输入自动提示邮箱后缀

    在本文中，我们将深入探讨如何使用jQuery来实现一个功能，即在用户在文本框中输入时自动提示邮箱的后缀。这个功能对于提高用户体验尤其有用，因为它可以帮助用户快速准确地输入有效的电子邮件地址。 首先，我们需要...

    VisualStudioCode插件实现在导入语句中输入时提示JavaScriptTypeScript模块

    本篇将详细讲解如何利用VSCode的插件来实现在导入语句中自动提示模块的功能，这对于提高开发效率、减少手动输入错误非常有帮助。 首先，我们要理解JavaScript的模块系统。在ES6中，引入了`import`和`export`关键字...

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

    在IT行业中，输入自动补全（Autocomplete）是一项常见的功能，尤其在搜索引擎、文本编辑器、Web表单等场景中广泛使用。它极大地提升了用户体验，减少了用户输入的时间和错误率。本项目旨在仿照谷歌和百度的样式，...

    自动提示城市输入

    6. 源码实现：在编程实现时，可以使用JavaScript库如jQuery UI的Autocomplete组件，或者Vue.js、React等现代前端框架的插件。它们提供了丰富的API和配置选项，以适应不同的业务需求。 7. 性能优化：在大数据量的...

    typeaheadjs快速和功能强大的JavaScript输入自动完成库

    **Typeahead.js：快速与强大的JavaScript输入自动完成库** Typeahead.js是由Twitter开发的一个轻量级但功能丰富的JavaScript库，专为实现输入自动补全功能而设计。它为Web开发者提供了一种简单、灵活的方式来增强...

    邮箱输入自动提示格式列表

    "邮箱输入自动提示格式列表"是一个专门针对这一功能的实现方案，它兼容当前所有浏览器，这意味着无论用户使用的是Chrome、Firefox、Safari、Edge还是其他浏览器，都能享受到一致的服务。 自动提示功能通常基于...

    js自动提示邮箱

    在JavaScript和jQuery的世界里，"js自动提示邮箱"是一个常见的功能，它涉及到用户输入时的实时验证和自动补全。这种技术通常用于提高用户体验，帮助用户更快、更准确地输入邮箱地址，避免输入错误。本篇文章将深入...

    PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_.docx

    在构建高效的Web应用程序时，提供输入自动完成功能可以极大地提升用户体验。本文主要讲解如何使用PHP与jQuery UI的autocomplete插件来实现这一功能，类似于搜索引擎的实时搜索建议。 首先，我们需要在HTML页面中...

Magicbox
Global site tag (gtag.js) - Google Analytics