基于javascript实现仿百度输入框自动匹配功能
本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到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:1pxsolid#555; } .des{ width:500px; background-color:lightyellow; border:1pxsolid#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> <SCRIPTLANGUAGE="JavaScript"> <!-- functionjsAuto(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"; returnthis; }; jsAuto.prototype.directionKey=function(){with(this) { vare=_e.keyCode?_e.keyCode:_e.which; varl=_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("javascriptautocompleteERROR:\n\ncannotgetreturnobject."); return; } }}; //objectmethod; jsAuto.prototype.item=function(msg) { if(msg.indexOf(",")>0) { vararrMsg=msg.split(","); for(vari=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); vardiv=document.createElement("DIV"); //bindeventtoobject. div.onmouseover=function(){_i.domouseover(this)}; div.onmouseout=function(){_i.domouseout(this)}; div.onclick=function(){_i.doclick(msg)}; varre=newRegExp("("+_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) { varre; _e=event; vare=_e.keyCode?_e.keyCode:_e.which; _x=[]; _f=false; _r=document.getElementById(fID); _v=fValue; _i=eval(_i); re=newRegExp("^"+fValue+"","i"); _o.innerHTML=""; for(vari=0;i<_msg.length;i++) { if(re.test(_msg[i])) { _i.append(_msg[i]); _f=true; } } _i?_i.display():alert("cannotgetinstance"); if(_f) { if((e==38||e==40||e==13)) { _i.directionKey(); } else { _c=0; _o.childNodes[_c].className="mouseover"; _s=true; } } }}; window.onerror=newFunction("returntrue;"); //--> </SCRIPT> </HEAD> <BODY> <divid="divc"> <!--thisistheautocompletecontainer.--> </div> <divalign="center"> <inputonkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)"id="auto"> </div> <SCRIPTLANGUAGE="JavaScript"> <!-- varjsAutoInstance=newjsAuto("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程序设计有所帮助。