用js实现输入提示功能
短信预约 -IT技能 免费直播动态提醒
这篇文章主要讲解了“用js实现输入提示功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用js实现输入提示功能”吧！
完成有以下功能：
输入字符会把以输入字符开头的提示出来。
支持上下方向键选择提示选项，支持循环
支持绑定一个数组提示，支持ajax传递输入框值请求数据。
支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示，互不影响。
支持中文。
首先是js的核心部分，其各部分都有较详细的说明，代码如下：
view source print ?
;( function (window){ var autoComplete= function (o){ var handler=( function (){ var handler= function (e,o){ return new handler.prototype.init(e,o); }; handler.prototype={ e: null , o: null , timer: null , show:0, input: null , popup: null , init: function (e,o){ this .e=e, this .o=o, this .input= this .e.getElementsByTagName( this .o.input)[0], this .popup= this .e.getElementsByTagName( this .o.popup)[0], this .initEvent(); }, match: function (quickExpr,value,source){ var li = null ; for ( var i in source){ if ( value.length>0 && quickExpr.exec(source[i])!= null ){ li = document.createElement( 'li' ); li.innerHTML = '' +source[i]+ 'a>' ; this .popup.appendChild(li); } } if ( this .popup.getElementsByTagName( 'a' ).length) this .popup.style.display= 'block' ; else this .popup.style.display= 'none' ; }, ajax: function (type,url,quickExpr,search){ var xhr = window.ActiveXObject ? new ActiveXObject( "Microsoft.XMLHTTP" ) : new XMLHttpRequest(); xhr.open(type,url, true ); xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ); var that= this ; xhr.onreadystatechange = function (){ if (xhr.readyState==4) { if (xhr.status==200) { var data = eval(xhr.responseText); that.match(quickExpr,search,data); } else { alert( "请求页面异常!" ); } } }; xhr.send( null ); }, fetch: function (ajax,search,quickExpr){ var that= this ; this .ajax(ajax.type,ajax.url+search,quickExpr,search); }, initEvent: function (){ var that= this ; this .input.onfocus = function (){ if ( this .inputValue) this .value = this .inputValue; var value= this .value, quickExpr=RegExp( '^' +value, 'i' ), self= this ; var els = that.popup.getElementsByTagName( 'a' ); if (els.length>0) that.popup.style.display = 'block' ; that.timer=setInterval( function (){ if (value!=self.value){ value=self.value; that.popup.innerHTML= '' ; if (value!= '' ){ quickExpr=RegExp( '^' +value); if (that.o.source) that.match(quickExpr,value,that.o.source); else if (that.o.ajax) that.fetch(that.o.ajax,value,quickExpr); } } },200); }; this .input.onblur = function (){ if ( this .value!= this .defaultValue) this .inputValue = this .value; clearInterval(that.timer); var current=-1; var els = that.popup.getElementsByTagName( 'a' ); var len = els.length-1; var aClick = function (){ that.input.inputValue = this .firstChild.nodeValue; that.popup.innerHTML= '' ; that.popup.style.display= 'none' ; that.input.focus(); }; var aFocus = function (){ for ( var i=len; i>=0; i--){ if ( this .parentNode===that.popup.children[i]){ current = i; break ; } } //that.input.value = this.firstChild.nodeValue; for ( var k in that.o.elemCSS.focus){ this .style[k] = that.o.elemCSS.focus[k]; } }; var aBlur= function (){ for ( var k in that.o.elemCSS.blur) this .style[k] = that.o.elemCSS.blur[k]; }; var aKeydown = function (event){ eventevent = event || window.event; if (current === len && event.keyCode===9){ that.popup.style.display = 'none' ; } else if (event.keyCode==40){ current++; if (current<-1) current=len; if (current>len){ current=-1; that.input.focus(); } else { that.popup.getElementsByTagName( 'a' )[current].focus(); } } else if (event.keyCode==38){ current--; if (current==-1){ that.input.focus(); } else if (current<-1){ current = len; that.popup.getElementsByTagName( 'a' )[current].focus(); } else { that.popup.getElementsByTagName( 'a' )[current].focus(); } } }; for ( var i=0; i<els.length; i++){ els[i].onclick = aClick; els[i].onfocus = aFocus; els[i].onblur = aBlur; els[i].onkeydown = aKeydown; } }; this .input.onkeydown = function (event){ eventevent = event || window.event; var els = that.popup.getElementsByTagName( 'a' ); if (event.keyCode==40){ if (els[0]) els[0].focus(); } else if (event.keyCode==38){ if (els[els.length-1]) els[els.length-1].focus(); } else if (event.keyCode==9){ if (event.shiftKey== true ) that.popup.style.display = 'none' ; } }; this .e.onmouseover = function (){ that.show=1; }; this .e.onmouseout = function (){ that.show=0; }; addEvent.call(document, 'click' , function (){ if (that.show==0){ that.popup.style.display= 'none' ; } }); } }; handlerhandler.prototype.init.prototype=handler.prototype; return handler; })(); if ( this .length){ for ( var a= this .length-1; a>=0; a--){ handler( this [a],o); } } else { handler( this ,o); } return this ; }; return window.autoComplete = autoComplete; })(window);其中了一些全局的自定义函数，如addEvent和在例子中将要用到的getElementsByClassName函数如下：
view source print ?
var getElementsByClassName = function (searchClass, node, tag) { nodenode = node || document, tagtag = tag ? tag.toUpperCase() : "*" ; if (document.getElementsByClassName){ var temp = node.getElementsByClassName(searchClass); if (tag== "*" ){ return temp; } else { var ret = new Array(); for ( var i=0; i<temp.length; i++)感谢各位的阅读，以上就是“用js实现输入提示功能”的内容了，经过本文的学习后，相信大家对用js实现输入提示功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
