現在很多網站都有這種效果，在文字框輸入一個字符，下邊會出來相匹配的內容，這個代碼就演示了這個功能是如何完成的，當然，這是個靜態的，你可以將提示的內容從資料庫讀取出來，要用到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 スタート、b スタート、c スタート、d スタート、e スタート、f スタート、g スタート、h スタート、i スタート、j スタート、k スタート、l スタート、m-スタート、n スタート、o スタート、p スタート、q スタート、r スタート、s スタート、t スタート、u スタート、v スタート、w スタート、x スタート、y スタート、 z スタート、z スタート、a スタート、b スタート、c スタート、d スタート、e スタート、f スタート、g スタート、h スタート、i スタート、j スタート、k-スタート、L スタート、M スタート、N スタート、O スタート、P スタート、Q スタート、R スタート、S スタート、T スタート、U スタート、V スタート、W スタート、 x スタート、y スタート、z スタート、u スタート、v スタート、w スタート、x スタート、y スタート、z スタート、z スタート、a スタート、b スタート、c-スタート、y スタート、z スタート、z スタート、a スタート、b スタート、c スタート、d スタート、e スタート、f スタート、g スタート、h スタート、i スタート、 s スタート、w スタート、x スタート、y スタート、z スタート、z スタート、a スタート、b スタート、c スタート、d スタート、e スタート、f スタート、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>请在输入框输入一字母：
