萬盛學電腦網 >> 腳本專題 >> javascript >> JS實現仿百度輸入框自動匹配功能的示例代碼介紹
JS實現仿百度輸入框自動匹配功能的示例代碼介紹
本篇文章主要是對JS實現仿百度輸入框自動匹配功能的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
現在很多網站都有這種效果，在文本框輸入一個字符，下邊會出來相匹配的內容，這個代碼就演示了這個功能是如何完成的，當然，這是個靜態的，你可以將提示的內容從數據庫讀取出來，要用到AJAX那東東。 代碼如下: <HTML> <HEAD> <title>帶輸入匹配的文本框</title> <style> 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; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- 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--<=0 ? _c = _o.childNodes.length-1 : ""; _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 :nn 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.length; 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 , "<strong>$1</strong>"); 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<_msg.length; 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;"); //--> </SCRIPT> </HEAD> <BODY> <div id="divc"> <!--this is the autocomplete container.--> </div> <div align="center"> <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- 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-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,z-start,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-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-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,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"); //--> </SCRIPT> <center>請在輸入框輸入一個字母：</center> </BODY> </HTML>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved