Baidu 입력 box_javascript 기술을 모방하는 자동 매칭 기능을 구현하는 JS 샘플 코드

이제 많은 웹사이트에서 텍스트 상자에 문자를 입력하면 아래에 일치하는 내용이 나타납니다. 이 코드는 이 기능이 어떻게 완료되는지 보여줍니다. 물론 내용은 정적입니다. AJAX를 사용해야 하는 데이터베이스에서 읽어옵니다.

코드 복사 코드는 다음과 같습니다. 带输入匹配的文本框 body,div { font-family:verdana; line-height:100%; font-size:10pt; } input { width:320px; } h1 { text-align:center; font-size:2.2em; } #divc { border:1px solid #555; } .des { width:500px; background-color:lightyellow; border:1px solid #555; padding:25px; margin-top:25px; } .mouseover { color:#ffffff; background-color:highlight; width:100%; cursor:default; } .mouseout { color:#000; width:100%; background-color:#ffffff; cursor:default; } function jsAuto(instanceName,objID) { this._msg = []; this._x = null; this._o = document.getElementById( objID ); if (!this._o) return; this._f = null; this._i = instanceName; this._r = null; this._c = 0; this._s = false; this._v = null; this._o.style.visibility = "hidden"; this._o.style.position = "absolute"; this._o.style.zIndex = "9999"; this._o.style.overflow = "auto"; this._o.style.height = "50"; return this; };

jsAuto.prototype.directionKey=function() { with (this) { var e = _e.keyCode ? _e.keyCode : _e.which; var l = _o.childNodes.length; (_c>l-1 || _c<0) ? _s=false : "";

if( e==40 && _s ) { _o.childNodes[_c].className="mouseout"; (_c >= l-1) ? _c=0 : _c ++; _o.childNodes[_c].className="mouseover"; } if( e==38 && _s ) { _o.childNodes[_c].className="mouseout"; _c-- _o.childNodes[_c].className="mouseover"; } if( e==13 ) { if(_o.childNodes[_c] && _o.style.visibility=="visible") { _r.value = _x[_c]; _o.style.visibility = "hidden"; } } if( !_s ) { _c = 0; _o.childNodes[_c].className="mouseover"; _s = true; } }};

// mouseEvent. jsAuto.prototype.domouseover=function(obj) { with (this) { _o.childNodes[_c].className = "mouseout"; _c = 0; obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover"; }}; jsAuto.prototype.domouseout=function(obj) { obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout"; }; jsAuto.prototype.doclick=function(msg) { with (this) { if(_r) { _r.value = msg; _o.style.visibility = "hidden"; } else { alert("javascript autocomplete ERROR :\n\n can not get return object."); return; } }};

// object method; jsAuto.prototype.item=function(msg) { if( msg.indexOf(",")>0 ) { var arrMsg=msg.split(","); for(var i=0; i { arrMsg[i] ? this._msg.push(arrMsg[i]) : ""; } } else { this._msg.push(msg); } this._msg.sort(); }; jsAuto.prototype.append=function(msg) { with (this) { _i ? "" : _i = eval(_i); _x.push(msg); var div = document.createElement("DIV"); //bind event to object. div.onmouseover = function(){_i.domouseover(this)}; div.onmouseout = function(){_i.domouseout(this)}; div.onclick = function(){_i.doclick(msg)}; var re = new RegExp("(" + _v + ")","i"); div.style.lineHeight="140%"; div.className = "mouseout"; if (_v) div.innerHTML = msg.replace(re , " $1 "); div.style.fontFamily = "verdana"; _o.appendChild(div); }}; jsAuto.prototype.display=function() { with(this) { if(_f && _v!="") { _o.style.left = _r.offsetLeft; _o.style.width = _r.offsetWidth; _o.style.top = _r.offsetTop + _r.offsetHeight; _o.style.visibility = "visible"; } else { _o.style.visibility="hidden"; } }}; jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this) { var re; _e = event; var e = _e.keyCode ? _e.keyCode : _e.which; _x = []; _f = false; _r = document.getElementById( fID ); _v = fValue; _i = eval(_i); re = new RegExp("^" + fValue + "", "i"); _o.innerHTML="";

for(var i=0; i { if(re.test(_msg[i])) { _i.append(_msg[i]); _f = true; } }

_i ? _i.display() : alert("can not get instance");

if(_f) { if((e==38 || e==40 || e==13)) { _i.directionKey(); } else { _c=0; _o.childNodes[_c].className = "mouseover"; _s=true; } } }}; window.onerror=new Function("return true;"); //-->

var jsAutoInstance = new jsAuto("jsAutoInstance","divc"); 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"); jsAutoInstance.item("blueDestiny" ); jsAutoInstance.item("BlueMiracle,Blue"); jsAutoInstance.item("angela,geniuslau"); jsAutoInstance.item("never-online"); //- -> 请在输入框输入一个字母：

Baidu 입력 box_javascript 기술을 모방하는 자동 매칭 기능을 구현하는 JS 샘플 코드

관련 기사