Home > Developer > JavaScript
This article illustrates the detailed code for implementing the automatic matching function of Baidu input box based on JavaScript, now a lot of web sites have this effect, in the text box to enter a character, the following will come out to match the content, this code shows how this function is done, of course, this is a static, You can read the contents of the prompts from the database, to use Ajax that Dongdong, share for everyone to reference, the specific content as follows
<HTML> <HEAD> <title> with input matching text box </title> <style> body,div {font-family:verdana;
line-height:100%;
font-size:10pt;
} input {width:320px;
} h1 {Text-align:center;
Font-size:2.2em;
} #divc {border:1px solid #555;
} des {width:500px;
Background-color:lightyellow;
border:1px solid #555;
padding:25px;
margin-top:25px;
}. mouseover {color: #ffffff;
Background-color:highlight;
width:100%;
Cursor:default;
}. mouseout {color: #000;
width:100%;
Background-color: #ffffff;
Cursor:default;
} </style> <script language= "JavaScript" > <!--function 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 {A
Lert ("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)};
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.wid
th = _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.keycod
E: _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=t
Rue
}
}
}};
Window.onerror=new Function ("return true;"); --> </SCRIPT> ≪/head> <BODY> <div id= "DIVC" > <!--this is the AutoComplete container.--> </div> <div Alig
n= "center" > <input onkeyup= "jsautoinstance.handleevent (this.value, ' Auto ', event)" id= "Auto" > </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,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-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,s-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,a-start,b-start,c-start,
D-start,e-start,z-start,z-start ");
Jsautoinstance.item ("Bluedestiny");
Jsautoinstance.item ("Bluemiracle,blue");
Jsautoinstance.item ("Angela,geniuslau");
Jsautoinstance.item ("Never-online");
--> </SCRIPT> <center> Please enter a letter in the input box:</center> </BODY> </HTML>
Hopefully this article will help you learn about JavaScript programming.
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
