우연히 발견한 자동완성 소스코드를 공유합니다. 여기서 테스트할 때는 배열을 사용하는데, 실제로 사용할 때는 Ajax를 통해 서버에서 가져오는 방식으로 변경하면 괜찮을 것 같습니다. 팁: 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 단색 #333;<br> 테두리 왼쪽: 1px 단색 #333;<br> 테두리 오른쪽: 1px 단색 #333;<br> 위치:절대;<br> 표시: 없음;<br>}<br> .auto_show {<br> 너비:204px;<br> border-top: 1px solid #333;<br> border-bottom: 1px solid #333;<br> border-left: 1px solid #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> 너비:100% ;<br>}<br>.auto_onmouseout{<br> 색상:#000000;<br> 너비: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, 인수);<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>}, <🎜 🎜 // 删除自动完成需要的所有 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> 반환 함수(){<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> 변수 길이 = _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> presskey : function (event) {<🎜 🎜> var length = this.autoObj.children.length;<BR> //光标键"↓"<BR> if(event.keyCode==40){<BR> this.index;<BR> if(this.index> 길이){<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, '')==""){ 반환; }//值为空，退 Out<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</strong>"); / /검색된 문자는 굵게 표시됩니다<br> this.autoObj.appendChild(div);<br> this.autoObj.className="auto_show";<br> div_index;<br> <br> this.pressKey(이벤트 );<br> window.onresize=Bind(this,function(){this.init();});<br> }<br>}<br>//--> ;<br></SCRIPT> ;<BR><body><br><h1 align="center">자동 완성 기능</h1><br> <div align="center"><input type="text" style= "width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></ div><br> <div class="auto_hidden" id ="auto"><!--자동 완성 DIV--></div><br><script><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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
