现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到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> <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-開始,h-開始,i-開始,a-開始,b -開始,c-開始,d-開始,e-開始,z-開始,z-開始");<BR>jsAutoInstance.item("blueDestiny" );<BR>jsAutoInstance.item("BlueMiracle,Blue") ;<BR>jsAutoInstance.item("angela,geniuslau");<BR>jsAutoInstance.item("從不在線");<BR>//- -><BR> 請在輸入框中輸入一個字母：
