Ajax automatically completes the question in the drop-down prompt box

Ajax automatically completes the question in the drop-down prompt box

Http://bbs.blueidea.com/thread-2691904-1-1.html
Http://www.cnblogs.com/jinchun/archive/2007/03/28/691145.html

<Script language = "JavaScript">
VaR intindex = 0; arrlist = new array ();
Arrlist [intindex ++] = "1sdfsdf.com ";
Arrlist [intindex ++] = "a11sdafs.net ";
Arrlist [intindex ++] = "b22dsafsdf ";
Arrlist [intindex ++] = "c333asdfsadf ";
Arrlist [intindex ++] = "4444 dsafasdf ";
Arrlist [intindex ++] = "dddsfddsafdsaf ";
Arrlist [intindex ++] = "121213 dsafsdaf ";
Arrlist [intindex ++] = "43213 asdfadsf ";
Arrlist [intindex ++] = "dsa3121dasf3 ";
Arrlist [intindex ++] = "a213 ";
Arrlist [intindex ++] = "323313 ";
Arrlist [intindex ++] = "3213 ";
Arrlist [intindex ++] = "32213 ";
Arrlist [intindex ++] = "dsfsdddd ";
Arrlist [intindex ++] = "ds11dfsfd ";
Arrlist [intindex ++] = "ffdafd ";
Arrlist [intindex ++] = "afdfd ";
Arrlist [intindex ++] = "AFD ";
Arrlist [intindex ++] = "baffad ";
Arrlist [intindex ++] = "2fda2fd ";
Arrlist [intindex ++] = "DASD ";

Function smanpromptlist (arrlist, objinputid ){
This. Style = "Background: # e8f7eb; Border: 1px solid # cccccc; font-size: 14px; cursor: default ;"
If (arrlist. constructor! = Array) {alert ('smanpromptlist initialization failed: the first parameter is not an array! '); Return ;}
Window. onload = function (){
Arrlist. Sort (function (a, B ){
If (A. length> B. Length) return 1;
Else if (A. Length = B. Length) return a. localecompare (B );
Else return-1;
})
VaR objouter = Document. getelementbyid ("_ smandisp") // display the DIV object
VaR objinput = Document. getelementbyid (objinputid); // text box object
VaR selectedindex =-1;
VaR inttmp; // used for loop :)
If (objinput = NULL) {alert ('smanpromptlist initialization failed: "'+ objinputid +'" textbox 'not found); return ;}
// Text box loses focus
Objinput. onblur = function (){
Objouter. style. Display = 'none ';
}
// Lift the text box
Objinput. onkeyup = checkkeycode;
// The text box gets the focus
Objinput. onfocus = checkandshow;
Function checkkeycode (){
VaR Ie = (document. All )? True: false
If (IE ){
VaR keycode = event. keycode
If (keycode = 40 | keycode = 38) {// bottom up
VaR ISUP = false
If (keycode = 40) ISUP = true;
Chageselection (ISUP)
} Else if (keycode = 13) {// press ENTER
Outselection (selectedindex );
} Else {
Checkandshow ()
}
} Else {
Checkandshow ()
}
Divposition ()
}

Function checkandshow (){
VaR strinput = objinput. Value
If (strinput! = ""){
Divposition ();
Selectedindex =-1;
Objouter. innerhtml = "";
For (inttmp = 0; inttmp <arrlist. length; inttmp ++ ){
If (arrlist [inttmp]. substr (0, strinput. Length). touppercase () = strinput. touppercase ()){
Addoption (arrlist [inttmp]);
}
}
Objouter. style. Display = '';
} Else {
Objouter. style. Display = 'none ';
}
Function addoption (value ){
Objouter. innerhtml + = "<Div onmouseover =/" this. classname = 'sman _ selectedstyle'/"onmouseout =/" this. classname = ''/" onmousedown =/"document. getelementbyid ('"+ objinputid + "'). value = '"+ value +"'/">" + value + "</div>"
}
}
Function chageselection (ISUP ){
If (objouter. style. Display = 'None '){
Objouter. style. Display = '';
} Else {
If (ISUP)
Selectedindex ++
Else
Selectedindex --
}
VaR maxindex = objouter. Children. Length-1;
If (selectedindex <0) {selectedindex = 0}
If (selectedindex> maxindex) {selectedindex = maxindex}
For (inttmp = 0; inttmp <= maxindex; inttmp ++ ){

If (inttmp = selectedindex ){
Objouter. Children [inttmp]. classname = "sman_selectedstyle ";
} Else {
Objouter. Children [inttmp]. classname = "";
}
}
}
Function outselection (INDEX ){
Objinput. value = objouter. Children [Index]. innertext;
Objouter. style. Display = 'none ';
}
Function divposition (){
Objouter. style. Top = getabsoluteheight (objinput) + getabsolutetop (objinput );
Objouter. style. Left = getabsoluteleft (objinput );
Objouter. style. width = getabsolutewidth (objinput)
}
}
Document. write ("<Div id = '_ smandisp' style = 'position: absolute; display: none;" + this. style + "'onbulr> </div> ");
Document. Write ("<style>. sman_selectedstyle {background-color: #102681; color: # ffffff} </style> ");
Function getabsoluteheight (OB ){
Return OB. offsetheight
}
Function getabsolutewidth (OB ){
Return OB. offsetwidth
}
Function getabsoluteleft (OB ){
VaR mendingleft = OB. offsetleft;
While (ob! = NULL & ob. offsetparent! = NULL & ob. offsetparent. tagname! = "Body "){
Mendingleft + = OB. offsetparent. offsetleft;
Mendingob = OB. offsetparent;
}
Return mendingleft;
}
Function getabsolutetop (OB ){
VaR mendingtop = OB. offsettop;
While (ob! = NULL & ob. offsetparent! = NULL & ob. offsetparent. tagname! = "Body "){
Mendingtop + = OB. offsetparent. offsettop;
Ob = OB. offsetparent;
}
Return mendingtop;
}
}
Smanpromptlist (arrlist, "aspx ")
Smanpromptlist (arrlist, "inputer ")
</SCRIPT>
Enter the following content:
<Input type = "text" id = "inputer"> for example,
<Br>
<Font color = "red">
Can be used only for the drop-down prompt of one text box?
</Font>

If it's two, you won't be able to come up with a prompt... <Br>
<Input type = "text" id = "aspx"> <br>
The drop-down prompt for multiple text boxes is still not implemented,
My JS is not good. Please help me. I want

<Font color = "red">
What if a drop-down prompt is displayed for multiple text boxes... <Br>
</Font>

 

Add a function.
Function dropalert ()
{
Init ();
Smanpromptlist (arrlist, "text1"); // Add the Control ID here.
Smanpromptlist (arrlist, "text2"); // Add the Control ID here.
Smanpromptlist (arrlist, "text3"); // Add the Control ID here.
}

The preceding Code indicates that three text boxes, text1, text2, and text3, are simultaneously prompted.

Add a function.
Function dropalert ()
{
Init ();
Smanpromptlist (arrlist, "text1"); // Add the Control ID here.
Smanpromptlist (arrlist, "text2"); // Add the Control ID here.
Smanpromptlist (arrlist, "text3"); // Add the Control ID here.
}

The preceding Code indicates that three text boxes, text1, text2, and text3, are simultaneously prompted.

The syntax in HTML is as follows:
<Body onload = "dropalert ()">
<Input type = "text" id = "text1">
<Input type = "text" id = "text2">
<Input type = "text" id = "text3">
</Body>