基于javascript实现仿百度输入框自动匹配功能

时间：2021-05-25

本文实例讲解了基于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: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 :\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.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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章