Un exemple simple de saisie semi-automatique implémenté dans les compétences JS_javascript

Partagez un code source à saisie semi-automatique que j'ai découvert accidentellement. Lors des tests ici, nous utilisons un tableau. Lorsque nous l'utilisons réellement, nous pouvons le modifier pour la méthode d'obtention du serveur via Ajax et tout ira bien.

Astuce : Vous pouvez l'enregistrer directement dans un fichier html pour visualiser l'effet.

Copier le code Le code est le suivant : 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:aucun; } .auto_show { width:204px; border-top : 1px solid #333; border-bottom : 1px solid #333; border-left : 1px solid #333; border -droite : 1px solide #333; position:absolute; z-index:9999; /* 设置对象的层叠顺序 */ display:block; } .auto_onmouseover{ color:#ffffff; background-color:highlight; width:100% ; } .auto_onmouseout{ couleur :#000000; largeur :100 %; couleur d'arrière-plan :#ffffff; } var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } > fonction AutoComplete(obj,autoObj,arr){ this.obj=$(obj); //输入框 this.autoObj=$(autoObj);//DIV的根节点 this.value_arr=arr; //不要包含重复值 this.index=-1; //当前选中的DIV的索引 this.search_value=""; //保存当前搜索的字符 } AutoComplete.prototype={ //初始化DIV的位置 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.autoObj .hasChildNodes() ){ this.autoObj.removeChild(this.autoObj.firstChild); } this.autoObj.className="auto_hidden"; }, //设置值 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; longueur variable = _this.autoObj.children.length; for(var j=0;j if(j!=_this.index ){ _this.autoObj.childNodes[j]. className='auto_onmouseout'; }else{ _this.autoObj.childNodes[j].className='auto_onmouseover'; } } } this.autoObj.childNodes[i].className='auto_onmouseout'; }else{ this.autoObj.childNodes[i].className='auto_onmouseover'; this.obj .value=this.autoObj.childNodes[i].seq; } } } , //响应键盘 pressKey : function(event){ var length = this.autoObj.children.length; //光标键"↓" if(event.keyCode==40){ this.index; if(this.index> longueur){ this.index=0; }else if(this.index==length){ this.obj.value=this.search_value; } this.changeClassname (longueur); } //光标键"↑" else if(event.keyCode==38){ this.index--; if(this.index this.index = longueur - 1; } else if (this.index == - 1) { this.obj.value = this.search_value; } > this.index=-1; }else{ this.index=-1; } }, //程序入口 start : function(event){ 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, '')==""){ retour ; }//值为空，退出 try{ var reg = new RegExp("(" this.obj.value ")","i");} catch (e){ return; } var div_index=0;//Enregistrez l'index du DIV créé 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 "); / /Les caractères recherchés sont affichés en gras this.autoObj.appendChild(div); this.autoObj.className="auto_show"; div_index; this.pressKey(event ); window.onresize=Bind(this,function(){this.init();}); } } //--&gt ; Fonction de saisie semi-automatique 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']);