이제 많은 웹사이트에서 텍스트 상자에 문자를 입력하면 아래에 일치하는 내용이 나타납니다. 이 코드는 이 기능이 어떻게 완료되는지 보여줍니다. 물론 내용은 정적입니다. AJAX를 사용해야 하는 데이터베이스에서 읽어옵니다. 코드 복사 코드는 다음과 같습니다. 带输入匹配的文本框<br>body,div {<br>font-family:verdana;<br>line-height:100%;<br>font-size:10pt;<br>}<br>input {<br>width:320px;<br>}<br>h1 {<br>text-align:center;<br>font-size:2.2em;<br>}<br>#divc {<br>border:1px solid #555;<br>}<br>.des {<br>width:500px;<br>background-color:lightyellow;<br>border:1px solid #555;<br>padding:25px;<br>margin-top:25px;<br>}<br>.mouseover {<br>color:#ffffff;<br>background-color:highlight;<br>width:100%;<br>cursor:default;<br>}<br>.mouseout {<br>color:#000;<br>width:100%;<br>background-color:#ffffff;<br>cursor:default;<br>}<br><br><!--<BR>function jsAuto(instanceName,objID)<BR>{<BR>this._msg = [];<BR>this._x = null;<BR>this._o = document.getElementById( objID );<BR>if (!this._o) return;<BR>this._f = null;<BR>this._i = instanceName;<BR>this._r = null;<BR>this._c = 0;<BR>this._s = false;<BR>this._v = null;<BR>this._o.style.visibility = "hidden";<BR>this._o.style.position = "absolute";<BR>this._o.style.zIndex = "9999";<BR>this._o.style.overflow = "auto";<BR>this._o.style.height = "50";<BR>return this;<BR>};</P> <P><BR>jsAuto.prototype.directionKey=function() { with (this)<BR>{<BR>var e = _e.keyCode ? _e.keyCode : _e.which;<BR>var l = _o.childNodes.length;<BR>(_c>l-1 || _c<0) ? _s=false : "";</P> <P><BR>if( e==40 && _s )<BR>{<BR>_o.childNodes[_c].className="mouseout";<BR>(_c >= l-1) ? _c=0 : _c ++;<br>_o.childNodes[_c].className="mouseover";<br>}<br>if( e==38 && _s )<br>{<br>_o.childNodes[_c].className="mouseout";<br>_c--<=0 ? _c = _o.childNodes.length-1 : "";<BR>_o.childNodes[_c].className="mouseover";<BR>}<BR>if( e==13 )<BR>{<BR>if(_o.childNodes[_c] && _o.style.visibility=="visible")<BR>{<BR>_r.value = _x[_c];<BR>_o.style.visibility = "hidden";<BR>}<BR>}<BR>if( !_s )<BR>{<BR>_c = 0;<BR>_o.childNodes[_c].className="mouseover";<BR>_s = true;<BR>}<BR>}};</P> <P><BR>// mouseEvent.<BR>jsAuto.prototype.domouseover=function(obj) { with (this)<BR>{<BR>_o.childNodes[_c].className = "mouseout";<BR>_c = 0;<BR>obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";<BR>}};<BR>jsAuto.prototype.domouseout=function(obj)<BR>{<BR>obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";<BR>};<BR>jsAuto.prototype.doclick=function(msg) { with (this)<BR>{<BR>if(_r)<BR>{<BR>_r.value = msg;<BR>_o.style.visibility = "hidden";<BR>}<BR>else<BR>{<BR>alert("javascript autocomplete ERROR :\n\n can not get return object.");<BR>return;<BR>}<BR>}};</P> <P><BR>// object method;<BR>jsAuto.prototype.item=function(msg)<BR>{<BR>if( msg.indexOf(",")>0 )<br>{<br>var arrMsg=msg.split(",");<br>for(var i=0; i<arrMsg.length; i++)<BR>{<BR>arrMsg[i] ? this._msg.push(arrMsg[i]) : "";<BR>}<BR>}<BR>else<BR>{<BR>this._msg.push(msg);<BR>}<BR>this._msg.sort();<BR>};<BR>jsAuto.prototype.append=function(msg) { with (this)<BR>{<BR>_i ? "" : _i = eval(_i);<BR>_x.push(msg);<BR>var div = document.createElement("DIV");<BR>//bind event to object.<BR>div.onmouseover = function(){_i.domouseover(this)};<BR>div.onmouseout = function(){_i.domouseout(this)};<BR>div.onclick = function(){_i.doclick(msg)};<BR>var re = new RegExp("(" + _v + ")","i");<BR>div.style.lineHeight="140%";<BR>div.className = "mouseout";<BR>if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");<br>div.style.fontFamily = "verdana"; <p><br>_o.appendChild(div);<br>}};<br>jsAuto.prototype.display=function() { with(this)<br>{<br>if(_f && _v!="")<br>{<br>_o.style.left = _r.offsetLeft;<br>_o.style.width = _r.offsetWidth;<br>_o.style.top = _r.offsetTop + _r.offsetHeight;<br>_o.style.visibility = "visible";<br>}<br>else<br>{<br>_o.style.visibility="hidden";<br>}<br>}};<br>jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)<br>{<br>var re;<br>_e = event;<br>var e = _e.keyCode ? _e.keyCode : _e.which;<br>_x = [];<br>_f = false;<br>_r = document.getElementById( fID );<br>_v = fValue;<br>_i = eval(_i);<br>re = new RegExp("^" + fValue + "", "i");<br>_o.innerHTML="";</p> <p><br>for(var i=0; i<_msg.length; i++)<BR>{<BR>if(re.test(_msg[i]))<BR>{<BR>_i.append(_msg[i]);<BR>_f = true;<BR>}<BR>}</P> <P><BR>_i ? _i.display() : alert("can not get instance");</P> <P><BR>if(_f)<BR>{<BR>if((e==38 || e==40 || e==13))<BR>{<BR>_i.directionKey();<BR>}<BR>else<BR>{<BR>_c=0;<BR>_o.childNodes[_c].className = "mouseover";<BR>_s=true;<BR>}<BR>}<BR>}};<BR>window.onerror=new Function("return true;");<BR>//--><br> < /div> <br><!--<BR>var jsAutoInstance = new jsAuto("jsAutoInstance","divc");<BR>jsAutoInstance.item(" a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m- 시작,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start, z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k- 시작,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start, x-start,y-start,z-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c- 시작,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start, s-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g- start,h-start,i-start,a-start,b-start,c-start,d-start,e-start,z-start,z-start");<BR>jsAutoInstance.item("blueDestiny" );<BR>jsAutoInstance.item("BlueMiracle,Blue");<BR>jsAutoInstance.item("angela,geniuslau");<BR>jsAutoInstance.item("never-online");<BR>//- -><br>请在输入框输入一个字母：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
