登 录
此文失效请使用jquery easy-ui更方便（后加）
自己弄了很长时间，一直不能正常实现自动提示，今天好不容易在网上找到，记录下来
<HTML><br /> <HEAD> </p> <p><title>模仿IE自动完成功能，读取输入框存取记录</title><br /> <mce:style><!--</p> <p>body,div {<br /> font-family:verdana;<br /> line-height:100%;<br /> font-size:9pt;<br /> }<br /> input {<br /> width:300px;<br /> }<br /> h1 {<br /> text-align:center;<br /> font-size:2.2em;<br /> }<br /> #divf {<br /> margin:10px;<br /> font-size:0.8em;<br /> text-align:center;<br /> }<br /> #divc {<br /> border:1px solid #333333;<br /> }<br /> .des {<br /> width:500px;<br /> background-color:lightyellow;<br /> border:1px solid #333;<br /> padding:20px;<br /> margin-top:20px;<br /> }<br /> .mouseover {<br /> color:#ffffff;<br /> background-color:highlight;<br /> width:100%;<br /> cursor:default;<br /> }<br /> .mouseout {<br /> color:#000000;<br /> width:100%;<br /> background-color:#ffffff;<br /> cursor:default;<br /> }<br /> --></mce:style><style mce_bogus="1"><br /> body,div {<br /> font-family:verdana;<br /> line-height:100%;<br /> font-size:9pt;<br /> }<br /> input {<br /> width:300px;<br /> }<br /> h1 {<br /> text-align:center;<br /> font-size:2.2em;<br /> }<br /> #divf {<br /> margin:10px;<br /> font-size:0.8em;<br /> text-align:center;<br /> }<br /> #divc {<br /> border:1px solid #333333;<br /> }<br /> .des {<br /> width:500px;<br /> background-color:lightyellow;<br /> border:1px solid #333;<br /> padding:20px;<br /> margin-top:20px;<br /> }<br /> .mouseover {<br /> color:#ffffff;<br /> background-color:highlight;<br /> width:100%;<br /> cursor:default;<br /> }<br /> .mouseout {<br /> color:#000000;<br /> width:100%;<br /> background-color:#ffffff;<br /> cursor:default;<br /> } </style><br /> <SCRIPT LANGUAGE="JavaScript"><br /> <!-- </p> <p>// script by blueDestiny<br /> // email : blueDestiny [at] 126 . com </p> <p>// Object: jsAuto<br /> // browser: ie, mf.<br /> // example: </p> <p>// step1 :<br /> // create autocomplete container, return object and bind event to the object, and<br /> ///create a new jsAuto instance:<br /> // <div id="divautocomplete"></div><br /> // var autocomplete = new jsAuto("autocomplete","divautocomplete")<br /> // handle event:<br /> // autocomplete.handleEvent(value, returnObjectID)<br /> // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)> </p> <p>// step2 :<br /> // add autocompete item:<br /> // autocomplete.item(string)<br /> // string must be a string var, you can split the string by ","<br /> // autocomplete.item("blueDestiny,never-online,csdn,blueidea") </p> <p>// http://www.never-online.com </p> <p>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>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> 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 /> } </p> <p> if( !_s )<br /> {<br /> _c = 0;<br /> _o.childNodes[_c].className="mouseover";<br /> _s = true;<br /> }<br /> }}; </p> <p>// 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 :nn can not get return object.");<br /> return;<br /> }<br /> }}; </p> <p>// 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"); </p> <p> //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> <p> _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> 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> _i ? _i.display() : alert("can not get instance"); </p> <p> 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 /> </SCRIPT><br /> </HEAD> </p> <p><BODY><br /> <div id="divc"><br /> <!--this is the autocomplete container.--><br /> </div><br /> <h1>Autocomplete Function</h1><br /> <div align="center"><br /> <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"><br /> </div><br /> <div id="divf"><br /> Power By Miracle, never-online<br /> </div> </p> <p><SCRIPT LANGUAGE="JavaScript"><br /> <!--<br /> var jsAutoInstance = new jsAuto("jsAutoInstance","divc");<br /> 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,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,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,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,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,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,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,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,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,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,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,z-start");<br /> jsAutoInstance.item("blueDestiny");<br /> jsAutoInstance.item("BlueMiracle,Blue");<br /> jsAutoInstance.item("angela,geniuslau");<br /> jsAutoInstance.item("never-online");<br /> //--><br /> </SCRIPT><br /> <center>请随便输入一个字母看看 -_-</center><br /> </BODY><br /> </HTML>
抱歉!评论已关闭.