In this example, the color is used as an example to provide users with automatic prompts, display results and running results.
1. Establish a framework structure:
Copy codeThe Code is as follows:
<Body>
<Form method = "post" name = "myForm1">
Color: <input type = "text" name = "colors" id = "colors" onkeyup = "findColors ();"/>
</Form>
<Div id = "popup">
<Ul id = "colors_ul"> </ul>
</Div>
</Body>
2. Page and form CSS:
Copy codeThe Code is as follows:
<Style>
<! --
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; padding: 0px; margin: 5px; form {padding: 0px; margin: 0px ;}
Input {font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; border: 1px solid #000000;
Width: 200px; padding: 1px; margin: 0px; # popup {position: absolute; width: 202px;
Color: # 004a7e; font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Left: 41px; top: 25px; # popup. show {border: 1px solid # 004a7e; # popup. hide {border: none;
} Ul {
List-style: none;
Margin: 0px; padding: 0px; li. mouseOver {
Background-color: # 004a7e;
Color: # FFFFFF; li. mouseOut {
Background-color: # FFFFFF;
Color: # 004a7e; -->
</Style>
3. Implement JS matching user input:
Copy codeThe Code is as follows:
<Script language = "javascript">
Var oInputField; // considering that many functions need to be used
Var oPopDiv; // Therefore, global variables are used.
Var oColorsUl;
Var aColors = ["red", "green", "blue", "magenta", "yellow ",...... "Ivory", "darkmagenta", "cornfloewrblue"];
AColors. sort (); // sort by letter to make the display result more friendly
Function initVars () {oInputField = document. forms ["myForm1"]. colors;
OPopDiv = document. getElementByIdx_x ("popup ");
OColorsUl = document. getElementByIdx_x ("colors_ul"); function clearColors () {for (var I = oColorsUl. childNodes. length-1; I> = 0; I --)
OColorsUl. removeChild (oColorsUl. childNodes [I]);
OPopDiv. className = "hide"; function setColors (the_colors) {clearColors (); // clear the original prompt every time you enter a letter before continuing
OPopDiv. className = "show ";
Var oLi;
For (var I = 0; I <the_colors.length; I ++) {oLi = document. createElement_x ("li ");
OColorsUl. appendChild (oLi );
OLi. appendChild (document. createTextNode (the_colors [I]);
OLi. = function (){
This. className = "mouseOver"; // highlight oLi. = function (){
This. className = "mouseOut"; // restore the original oLi. onclick = function () {oInputField. value = this. firstChild. nodeValue;
ClearColors (); // clear prompt box at the same time} function findColors (){
InitVars (); // initialize the variable
If (oInputField. value. length> 0 ){
Var aResult = new Array (); // used to store matching results
For (var I = 0; I <aColors. length; I ++) // find the matched color from the color table if (aColors [I]. indexOf (oInputField. value) = 0)
AResult. push (aColors [I]); // press the result
If (aResult. length> 0) // if a matched color exists, it is displayed.
SetColors (aResult );
Else // otherwise, clear it. The user enters one more letter.
ClearColors (); // you may need to clear else from matching to none.
ClearColors (); // clear the prompt box when there is no input (for example, you press the del key)
</Script>
Enter the prompt/automatically completed Js code in the text box
In the text box, enter the automatic match or prompt function, enter the content, and automatically match the corresponding data. You can use the up and down key control options, press the Enter key to select, or you can directly use the mouse to select. Code: Create an instance. The first parameter is the name of the instance object, and the second parameter is the maximum number of displayed instances.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> text box input prompt/ automatic completion </title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312 "> </pead> <body> friendly prompt: the text box shields the carriage return, so the Enter key is not currently available. </Body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
