Ein einfaches Autocomplete-Beispiel, implementiert in JS_javascript-Kenntnissen

Teilen Sie einen automatisch vervollständigten Quellcode, den ich zufällig entdeckt habe. Beim Testen verwenden wir hier ein Array. Wenn wir es tatsächlich verwenden, können wir es so ändern, dass es vom Server über Ajax abgerufen wird, und es ist in Ordnung.

Tipp: Sie können es direkt in einer HTML-Datei speichern, um den Effekt anzuzeigen.

Code kopieren Der Code lautet wie folgt: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .auto_hidden { width:204px;border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; position:absolute; display:none; } .auto_show { width:204px; border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border -right: 1px solid #333; position:absolute; z-index:9999; /* 设置对象的层叠顺序 */ display:block; } .auto_onmouseover{ color:#ffffff; background-color:highlight; width:100% ; } .auto_onmouseout{ color:#000000; width:100%; background-color:#ffffff; } var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } function AutoComplete(obj,autoObj,arr){ this.obj=$(obj); //输入框 this.autoObj=$(autoObj);//DIV的根节点 this.value_arr=arr; //不要包含重复值 this.index=-1; //当前选中的DIV的索引 this.search_value=""; //保存当前搜索的字符 } AutoComplete.prototype={ //初存当前搜索的字置 init: function(){ this.autoObj.style.left = this. obj.offsetLeft "px"; this.autoObj.style.top = this.obj.offsetTop this.obj.offsetHeight "px"; this.autoObj.style.width= this.obj.offsetWidth - 2 "px";//减去边框的长度2px }, //删除自动完成需要的所有DIV deleteDIV: function(){ . while(this.autoO bj.hasChildNodes() ) { this.autoobj.removechild (this.autoobj.firstchild); setValue: function(_this){ return function(){ _this.obj.value=this.seq; _this.autoObj.className="auto_hidden"; } }, //模拟鼠标移动至DIV时，DIV高亮> autoOnmouseover: function(_this,_div_index){ return function(){ . _this.index=_div_index; var length = _this.autoObj.children.length; for(var j=0;j if(j!=_this.index ){ [j]. className='auto_onmouseout'; }else{ _this.autoObj.childNodes[j].className='auto_onmouseover'; . } } } }, //更改classname changeClassname: function(length){ for(var i=0;i if(i!=this.index ){ this.autoObj.childNodes[i].className='auto_onmouseout'; }else{ this.autoObj.childNodes[i].className='auto_onmouseover'; this.obj .value=this.autoObj.childNodes[i].seq; //光标键"↓" if(event.keyCode==40){ this.index; if(this.index> length){ this.index=0; }else if(this.index==length){ this.obj.value=this.search_value; . } } //光标键" ↑" else if(event.keyCode==38){ this.index--; if(this.index this.index=length - 1; }else if(this.index==-1){ this.obj.value=this.search_value; } & 🎜> this.index = -1; 🎜> if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){ this.init(); this.deleteDIV(); this.search_value=this. obj .value; var valueArr=this.value_arr; valueArr.sort(); if(this.obj.value.replace(/(^s*)|(s*$)/g, '')==""){ return; }//值为空，退出 try{ var reg = new RegExp("(" this.obj.value ")","i");} Catch (e){ return; } var div_index=0;//Den Index des erstellten DIV aufzeichnen for(var i=0;i if(reg.test(valueArr[i]) ) { var div = document.createElement("div"); div.className="auto_onmouseout"; div.seq=valueArr[i]; div.onclick=this.setValue ( this); div.onmouseover=this.autoOnmouseover(this,div_index); div.innerHTML=valueArr[i].replace(reg," $1 "); / /Die gesuchten Zeichen werden in Fettschrift angezeigt this.autoObj.appendChild(div); this.autoObj.className="auto_show"; div_index; this.pressKey(event ); window.onresize=Bind(this,function(){this.init();}); } } //--&gt ; Autocomplete-Funktion 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']);