- 技术人生
- 模仿IE自动完成功能，读取输入框存取记录
<
HTML
>
<
HEAD
>
<
title
>
网页特效代码|JsCode.CN|---模仿IE自动完成功能，读取输入框存取记录
</
title
>
<
style
>
...
body,div {...}{ font-family:verdana; line-height:100%; font-size:9pt;}input {...}{ width:300px;}h1 {...}{ text-align:center; font-size:2.2em;}#divf {...}{ margin:10px; font-size:0.8em; text-align:center;}#divc {...}{ border:1px solid #333333;}.des {...}{ width:500px; background-color:lightyellow; border:1px solid #333; padding:20px; margin-top:20px;}.mouseover {...}{ color:#ffffff; background-color:highlight; width:100%; cursor:default;}.mouseout {...}{ color:#000000; width:100%; background-color:#ffffff; cursor:default;}
</
style
>
<
SCRIPT
LANGUAGE
="JavaScript"
>
...
<!--// script by blueDestiny// email : blueDestiny [at] 126 . com// Object: jsAuto// browser: ie, mf.// example:// step1 : // create autocomplete container, return object and bind event to the object, and ///create a new jsAuto instance:// <div id="divautocomplete"></div>// var autocomplete = new jsAuto("autocomplete","divautocomplete")// handle event:// autocomplete.handleEvent(value, returnObjectID)// <input id="rautocomplete" οnkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)>// step2 :// add autocompete item:// autocomplete.item(string)// string must be a string var, you can split the string by ","// autocomplete.item("blueDestiny,never-online,csdn,blueidea")// http://www.never-online.comfunction 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 : 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
>
<
h1
>
Autocomplete Function
</
h1
>
<
div
align
="center"
>
<
input
onkeyup
="jsAutoInstance.handleEvent(this.value,'auto',event)"
id
="auto"
>
</
div
>
<
div
id
="divf"
>
Power By Miracle, never-online
</
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,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");jsAutoInstance.item("blueDestiny");jsAutoInstance.item("BlueMiracle,Blue");jsAutoInstance.item("angela,geniuslau");jsAutoInstance.item("never-online");//-->
</
SCRIPT
>
<
center
>
请随便输入一个字母看看 -_-
</
center
>
</
BODY
>
</
HTML
>
