偶然発見したオートコンプリートのソース コードを共有します。ここでテストする場合は配列を使用しますが、実際に使用する場合は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 ソリッド #333;<BR> border-bottom: 1 ピクセルのソリッド #333;<BR> ボーダー左: 1 ピクセルのソリッド #333;<BR> ボーダー右: 1 ピクセルのソリッド #333;<BR> 位置:絶対;<BR> 表示:なし;<BR>}<BR> .auto_show {<BR> width:204px;<BR> border-top: 1px ソリッド #333;<BR> border-bottom: 1px ソリッド #333;<BR> border-left: 1px ソリッド #333;<BR> border -右: 1px ソリッド #333;<BR> 位置:絶対;<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, argument);<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長さ = _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> //変更クラス名<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: > 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, '')==""){ リターン; }//值是空,退出<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> this.pressKey(event) );<BR> window.onresize=Bind(this,function(){this.init();});<BR> }<BR>}<BR>//--> ;<BR>> ;オートコンプリート関数 div> <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>