Imitate IE auto complete function, support Firefox. Support Key operation
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" ><HTML><HEAD><TITLE> New Document </ Title><meta name= "generator" content= "EditPlus" ><meta name= "Author" "content=" "><meta NAME=" Keywords "content=" "><meta name=" Description "content=" "><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;p adding: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 ObjectAnd bind event to the object, and///create a new Jsauto instance://<div id= "Divautocomplete" ></div>//var au Tocomplete = new Jsauto ("AutoComplete", "Divautocomplete")//Handle event://(value, Returnobjectid)//<input id= "Rautocomplete onkeyup=" autocomplete.handleevent (This.value, "Ratocomplete", event) >//Step2://Add Autocompete item://Autocomplete.item (String)//string must be a string Var, 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 = "Hidd En "; this._o.style.position =" absolute "; this._o.style.zindex =" 9999 "; this._o.style.overflow =" Auto "; this._ O.style.height = "n"; 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=f Alse: ""; 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 \ nthe 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)};d iv.onmouseout = function () {_i.domouseout (this)};d Iv.onclick = function () {_i.doclick (msg)} ; var re = new RegExp ("(" + _v +) "," I ");d iv.style.lineheight=" 140% ";d iv.classname =" Mouseout "; if (_v) div.innerhtml = m Sg.replace (Re, "<strong>$1</strong>");d iv.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></pead><body><div id= "DIVC" ><!--This is the AutoComplete container.-- ></div><p>autocomplete function</p><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></body></ptMl>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
