分享一篇無意間發現的自動完成原始碼。這裡測試的時候使用的是數組，實際使用的時候，我們換成Ajax從伺服器端取得的方式就OK了。 提示：可以直接儲存到一個html檔案中查看效果。 複製程式碼 程式碼如下: <BR>body {<BR> 左邊距: 0px;<BR> 上邊距: 0px; 0px;<BR> 下邊距：0px;<BR>}<BR>.auto_hidden {<BR> 寬度：204px;邊框頂部：1px 實心#333;<<>左邊框：1 像素實心#333;<BR> 右邊框：1 像素實心#333;<BR> 位置：絕對;<BR> 顯示：無；<BR>}< 204px;<BR> 上方邊框: 1px 實心#333;<BR> 下邊框: 1px 實心#333;<BR> 左框: 1px 實心#333;<BR> 左框: 1px 實心#333;<BR> 左框: 1px 實心#33;<BR> 左框: 11px 實心#333; 🎜>位置：絕對;<BR> z-index：9999; /* 設定物件的工件順序*/<BR> display:block;<BR>}<BR>.auto_onmouseover{<>; background-color:highlight;<BR> width:100% ;<BR>}<BR>.auto_onmouseout{<BR> 顏色:#000000;<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> > }<BR>}<BR>函數自動完成(obj,autoObj,arr){<BR> this.obj=$(obj); //輸入框<BR> DIV的根節點<BR> this.value_arr=arr; // 不包含重複值<BR> this.index=-1; 目前搜尋的字元<BR>}<BR>AutoComplete.prototype={<BR> //初始化DIV的位置<BR> init: function(){<BR> "px";<BR> this.autoObj.style.top = this.obj.offsetTop this.obj.offsetHeight "px";<BR> ;//已知的長度2px <BR> },<BR> //刪除所有使用的DIV<BR> deleteDIV: function(){<BR>Chi > this.autoObj.removeChild(this.autoObj.firstChild);<BR> },<BR> //設定值<BR> setValue: function( _this){<BR> return function(){<BR> _this.ob ";<BR> } <BR> } , <BR> / / 類比滑鼠移動至DIV時，DIV高亮<BR> autoOnmouseover: function(_this,_div_index){<BR> var length = _this.autoObj. children.length;<BR> for(var j=0;j<length;j ){<BR> _this.autoObj.childNodes [j]. className='auto_onmouseout ';<BR> }else{<BR> }<BR> }<BR> }<BR> }<BR> },<BR> //更改類別名稱<BR> changeClassname: function(length){<BR> (i!=this.索引){ <BR> this.autoObj.childNodes[i].className='auto_ this.autoObj.childNodes[i].className='auto_onmouseover ;<BR> .value=this.autoObj.childNodes[i].seq;<BR> }<BR> pressKey: function(event){<BR> var length = this.autoObj.children.length;<BR> // 按鍵"↓"<BR> if(this.index> ;長度){<BR> this.index=0;<BR> this.obj.value=this.search_value;<BR> }<BR> (length);<BR> }<BR> // 語音鍵"↑"<BR> ;<BR> if(this.index < ; -1){<BR> this.obj.value=this.search_value;<BR> } <BR> this.changeClassname(length);<BR> }<BR> 🎜> this.autoObj.className="auto_hidden";<BR> this.index=-1;<BR> }else{<BR> this.index=-1;<BR> start: function(event) { <BR> if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){<BR> .deleteDIV();<BR> this.search_value=this . obj .value;<BR> var valueArr=this.value_arr;<BR> obj.value.replace(/(^s*)|(s*$)/ g , '')==""){ 返回; }// 值為空，退出<BR> try{ var reg = new RegExp("(" this.obj.value ")","i");}<皮} }<BR> var div_index=0;//記錄所建立的DIV的指標<BR> if(reg.test(valueArr[i])) {<BR> <BR> div.seq=valueArr[i];<BR> this);<BR> div.onmouseover=this.autoOnmouseover(this,div_index);<BR> =valueArr[i].replace(reg,"<strong>$1");//搜索到的字粗體顯示<BR> this.autoObj.appendChild(div }="auto_show";<BR> div_index ;<BR> 🎜> }<BR> this.pressKey(event);<BR> window.onresize=Bind(this,function(){this.init();});<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>
