分享一篇无意间发现的自动完成源码。这里测试的时候使用的是数组，实际使用的时候，我们换成Ajax从服务器端获取的方式就OK了。提示：可以直接保存到一个html文件中查看效果。 复制代码 代码如下: <BR>body {<BR> margin-left: 0px;<BR> margin-top: 0px;<BR> margin-right: 0px;<BR> margin-bottom: 0px;<BR>}<BR>.auto_hidden {<BR> width:204px;border-top: 1px solid #333;<BR> border-bottom: 1px solid #333;<BR> border-left: 1px solid #333;<BR> border-right: 1px solid #333;<BR> position:absolute;<BR> display:none;<BR>}<BR>.auto_show {<BR> width:204px;<BR> border-top: 1px solid #333;<BR> border-bottom: 1px solid #333;<BR> border-left: 1px solid #333;<BR> border-right: 1px solid #333;<BR> position:absolute;<BR> z-index:9999; /* 设置对象的层叠顺序 */<BR> display:block;<BR>}<BR>.auto_onmouseover{<BR> color:#ffffff;<BR> background-color:highlight;<BR> width:100%;<BR>}<BR>.auto_onmouseout{<BR> color:#000000;<BR> width:100%;<BR> background-color:#ffffff;<BR>}<BR> <BR><!--<BR>var $ = function (id) {<BR> return "string" == typeof id ? document.getElementById(id) : id;<BR>}<BR>var Bind = function(object, fun) {<BR> return function() {<BR> return fun.apply(object, arguments);<BR> }<BR>}<BR>function AutoComplete(obj,autoObj,arr){<BR> this.obj=$(obj); //输入框<BR> this.autoObj=$(autoObj);//DIV的根节点<BR> this.value_arr=arr; //不要包含重复值<BR> this.index=-1; //当前选中的DIV的索引<BR> this.search_value=""; //保存当前搜索的字符<BR>}<BR>AutoComplete.prototype={<BR> //初始化DIV的位置<BR> init: function(){<BR> this.autoObj.style.left = this.obj.offsetLeft + "px";<BR> this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";<BR> this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px <BR> },<BR> //删除自动完成需要的所有DIV<BR> deleteDIV: function(){<BR> while(this.autoObj.hasChildNodes()){<BR> this.autoObj.removeChild(this.autoObj.firstChild);<BR> }<BR> this.autoObj.className="auto_hidden";<BR> },<BR> //设置值<BR> setValue: function(_this){<BR> return function(){<BR> _this.obj.value=this.seq;<BR> _this.autoObj.className="auto_hidden";<BR> } <BR> },<BR> //模拟鼠标移动至DIV时，DIV高亮<BR> autoOnmouseover: function(_this,_div_index){<BR> return function(){<BR> _this.index=_div_index;<BR> var length = _this.autoObj.children.length;<BR> for(var j=0;j<length;j++){<BR> if(j!=_this.index ){ <BR> _this.autoObj.childNodes[j].className='auto_onmouseout';<BR> }else{<BR> _this.autoObj.childNodes[j].className='auto_onmouseover';<BR> }<BR> }<BR> }<BR> },<BR> //更改classname<BR> changeClassname: function(length){<BR> for(var i=0;i<length;i++){<BR> if(i!=this.index ){ <BR> this.autoObj.childNodes[i].className='auto_onmouseout';<BR> }else{<BR> this.autoObj.childNodes[i].className='auto_onmouseover';<BR> this.obj.value=this.autoObj.childNodes[i].seq;<BR> }<BR> }<BR> }<BR> ,<BR> //响应键盘<BR> pressKey: function(event){<BR> var length = this.autoObj.children.length;<BR> //光标键"↓"<BR> if(event.keyCode==40){<BR> ++this.index;<BR> if(this.index>length){<BR> this.index=0;<BR> }else if(this.index==length){<BR> this.obj.value=this.search_value;<BR> }<BR> this.changeClassname(length);<BR> }<BR> //光标键"↑"<BR> else if(event.keyCode==38){<BR> this.index--;<BR> if(this.index<-1){<BR> this.index=length - 1;<BR> }else if(this.index==-1){<BR> this.obj.value=this.search_value;<BR> }<BR> this.changeClassname(length);<BR> }<BR> //回车键<BR> else if(event.keyCode==13){<BR> this.autoObj.className="auto_hidden";<BR> this.index=-1;<BR> }else{<BR> this.index=-1;<BR> }<BR> },<BR> //程序入口<BR> start: function(event){<BR> if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){<BR> this.init();<BR> this.deleteDIV();<BR> this.search_value=this.obj.value;<BR> var valueArr=this.value_arr;<BR> valueArr.sort();<BR> if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出<BR> try{ var reg = new RegExp("(" + this.obj.value + ")","i");}<BR> catch (e){ return; }<BR> var div_index=0;//记录创建的DIV的索引<BR> for(var i=0;i<valueArr.length;i++){<BR> if(reg.test(valueArr[i])){<BR> var div = document.createElement("div");<BR> div.className="auto_onmouseout";<BR> div.seq=valueArr[i];<BR> div.onclick=this.setValue(this);<BR> div.onmouseover=this.autoOnmouseover(this,div_index);<BR> div.innerHTML=valueArr[i].replace(reg,"<strong>$1");//搜索到的字符粗体显示<BR> this.autoObj.appendChild(div);<BR> this.autoObj.className="auto_show";<BR> div_index++;<BR> }<BR> }<BR> }<BR> this.pressKey(event);<BR> window.onresize=Bind(this,function(){this.init();});<BR> }<BR>}<BR>//--><BR>自动完成函数(Autocomplete Function) <BR> var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);<BR>
