用js实现输入提示（自动完成）
以前也写过一个jQuery的这种插件，但是很多地方根本不用jQuery，这个功能也有很多其它库支持，但是为了用这个功能而加载很多js插件，这样效率明显下降了很多，而且这个东西平时也很常用，所以一决心自己写了个相对比较独立的。
完成有以下功能：
输入字符会把以输入字符开头的提示出来。支持上下方向键选择提示选项，支持循环支持绑定一个数组提示，支持ajax传递输入框值请求数据。支持多个选择的dom元素一块绑定数据实现输入提示。各dom元素也可以单独绑定自己的数据实现输入提示，互不影响。支持中文。????? 首先是js的核心部分，其各部分都有较详细的说明，代码如下：
view sourceprint?
001;(function(window){002/* 插件开始 */003var 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????????????????else026????????????????????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};160return window.autoComplete = autoComplete;/* 暴露方法给全局对象 */161/* 插件结束 */162})(window);?
????? 其中了一些全局的自定义函数，如addEvent和在例子中将要用到的getElementsByClassName函数如下：
view sourceprint?01var 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 1 楼 antonyup_2006 2011-03-03 打成一个包 提供下载咯!呵呵