Example 1: directly compile the AJAX implementation.
Client:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> text box automatically prompted by Ajax </title>
<Style>
<! --
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; padding: 0px; margin: 5px;
}
Form {padding: 0px; margin: 0px ;}
Input {
/* Style of the user input box */
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; border: 1px solid #000000;
Width: 200px; padding: 1px; margin: 0px;
}
# Popup {
/* Style of the div block in the prompt box */
Position: absolute; width: 202px;
Color: # 004a7e; font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Left: 41px; top: 25px;
}
# Popup. show {
/* Display the border of the prompt box */
Border: 1px solid # 004a7e;
}
# Popup. hide {
/* Hide the border of the prompt box */
Border: none;
}
/* Style of the prompt box */
Ul {
List-style: none;
Margin: 0px; padding: 0px;
}
Li. mouseOver {
Background-color: # 004a7e;
Color: # FFFFFF;
}
Li. mouseOut {
Background-color: # FFFFFF;
Color: # 004a7e;
}
-->
</Style>
<Script language = "javascript">
Var oInputField; // considering that many functions need to be used
Var oPopDiv; // Therefore, global variables are used.
Var oColorsUl;
Var xmlHttp;
Function createXMLHttpRequest (){
If (window. ActiveXObject)
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
Else if (window. XMLHttpRequest)
XmlHttp = new XMLHttpRequest ();
}
Function initVars (){
// Initialize the variable
OInputField = document. forms ["myForm1"]. colors;
OPopDiv = document. getElementById ("popup ");
OColorsUl = document. getElementById ("colors_ul ");
}
Function clearColors (){
// Clear the prompt content
For (var I = oColorsUl. childNodes. length-1; I> = 0; I --)
OColorsUl. removeChild (oColorsUl. childNodes [I]);
OPopDiv. className = "hide ";
}
Function setColors (the_colors ){
// Display the prompt box. The input parameters are arrays composed of matched results.
ClearColors (); // each time you enter a letter, the original prompt is cleared first, and then continue
OPopDiv. className = "show ";
Var oLi;
For (var I = 0; I <the_colors.length; I ++ ){
// Display the matching result to the user one by one
OLi = document. createElement ("li ");
OColorsUl. appendChild (oLi );
OLi. appendChild (document. createTextNode (the_colors [I]);
OLi. onmouseover = function (){
This. className = "mouseOver"; // highlight when the mouse passes
}
OLi. onmouseout = function (){
This. className = "mouseOut"; // restore to the original state upon exit
}
OLi. onclick = function (){
// When you click a matching item, set the input box to the value of the item.
OInputField. value = this. firstChild. nodeValue;
ClearColors (); // clear the prompt box at the same time
}
}
}
Function findColors (){
InitVars (); // initialize the variable
If (oInputField. value. length> 0 ){
CreateXMLHttpRequest (); // send user input to the server
Var sUrl = "9-10.aspx? SColor = "+ oInputField. value +" & timestamp = "+ new Date (). getTime ();
XmlHttp. open ("GET", sUrl, true );
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
Var aResult = new Array ();
If (xmlHttp. responseText. length ){
AResult = xmlHttp. responseText. split (",");
SetColors (aResult); // Display Server results
}
Else
ClearColors ();
}
}
XmlHttp. send (null );
}
Else
ClearColors (); // clear the prompt box when there is no input (for example, you press the del key)
}
</Script>
</Head>
<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>
</Html>
Server (9-10.aspx ):Copy codeThe Code is as follows: <% @ Page Language = "C #" ContentType = "text/html" ResponseEncoding = "gb2312" %>
<% @ Import Namespace = "System. Data" %>
<%
Response. CacheControl = "no-cache ";
Response. AddHeader ("Pragma", "no-cache ");
String sInput = Request ["sColor"]. Trim ();
If (sInput. Length = 0)
Return;
String sResult = "";
String [] aColors = new string [] {"aliceblue", "antiquewith", "aquamarine", "azure", "beige", "bisque", "black ", "blanchedalmond", "blue", "blueviolet", "brass", "bronze", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate ", "copper", "coral", "cornfloewrblue", "cornsilk", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen ", "darkhaki", "darkmagenta", "darkolivegreen", "darkorchid", "darkorenge", "darkred", "darksalmon", "hidden", "hidden", "darkslategray ", "darkturquoise", "darkviotlet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "feldspar", "firebrick", "floralwhite", "forestgreen ", "fuchsia", "gainsboro", "gold", "goldenrod", "golenrod", "gostwhite", "gray", "green", "greenyellow", "honeydew ", "hotpink", "indianred", "inen", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue ", "lightcoral", "lightcyan", "lightgodenrod", "lightgodenrodyellow", "lightgray", "lightgreen", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue ", "lightslateblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "magenta", "maroom", "maroon ", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurpul", "queue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue ", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "navyblue", "oldlace", "olivedrab", "orange", "orchid ", "orengered", "palegodenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum ", "powderblue", "purple", "quartz", "red", "rosybrown", "royal blue", "saddlebrown", "salmon", "sandybrown", "scarlet ", "seagreen", "seashell", "sienna", "silver", "skyblue", "slategray", "snow", "springgreen", "steelblue", "tan ", "thistle", "tomato", "turquoise", "violet", "violetred", "wheat", "whitesmoke", "yellow", "yellowgreen "};
For (int I = 0; I <aColors. Length; I ++ ){
If (aColors [I]. IndexOf (sInput) = 0)
SResult + = aColors [I] + ",";
}
If (sResult. Length> 0) // if a match exists
SResult = sResult. Substring (0, sResult. Length-1); // remove the last ","
Response. Write (sResult );
%>
Example 2: Use jQuery.
Client:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> jQuery text box for automatic prompt </title>
<Style>
<! --
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; padding: 0px; margin: 5px;
}
Form {padding: 0px; margin: 0px ;}
Input {
/* Style of the user input box */
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px; border: 1px solid #000000;
Width: 200px; padding: 1px; margin: 0px;
}
# Popup {
/* Style of the div block in the prompt box */
Position: absolute; width: 202px;
Color: # 004a7e; font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Left: 41px; top: 25px;
}
# Popup. show {
/* Display the border of the prompt box */
Border: 1px solid # 004a7e;
}
/* Style of the prompt box */
Ul {
List-style: none;
Margin: 0px; padding: 0px;
Color: # 004a7e;
}
Li. mouseOver {
Background-color: # 004a7e;
Color: # FFFFFF;
}
-->
</Style>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Var oInputField; // considering that many functions need to be used
Var oPopDiv; // Therefore, global variables are used.
Var oColorsUl;
Function initVars (){
// Initialize the variable
OInputField =$ ("# colors ");
OPopDiv =$ ("# popup ");
OColorsUl = $ ("# colors_ul ");
}
Function clearColors (){
// Clear the prompt content
OColorsUl. empty ();
OPopDiv. removeClass ("show ");
}
Function setColors (the_colors ){
// Display the prompt box. The input parameters are arrays composed of matched results.
ClearColors (); // each time you enter a letter, the original prompt is cleared first, and then continue
OPopDiv. addClass ("show ");
For (var I = 0; I <the_colors.length; I ++)
// Display the matching result to the user one by one
OColorsUl. append ($ ("<li>" + the_colors [I] + "</li> "));
OColorsUl. find ("li"). click (function (){
OInputField. val ($ (this). text ());
ClearColors ();
}). Hover (
Function () {$ (this). addClass ("mouseOver ");},
Function () {$ (this). removeClass ("mouseOver ");}
);
}
Function findColors (){
InitVars (); // initialize the variable
If (oInputField. val (). length> 0 ){
// Obtain asynchronous data
$. Get ("14-10.aspx", {sColor: oInputField. val ()},
Function (data ){
Var aResult = new Array ();
If (data. length> 0 ){
AResult = data. split (",");
SetColors (aResult); // Display Server results
}
Else
ClearColors ();
});
}
Else
ClearColors (); // clear the prompt box when there is no input (for example, you press the del key)
}
</Script>
</Head>
<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>
</Html>
Server Side (14-10.aspx ):Copy codeThe Code is as follows: <% @ Page Language = "C #" ContentType = "text/html" ResponseEncoding = "gb2312" %>
<% @ Import Namespace = "System. Data" %>
<%
Response. CacheControl = "no-cache ";
Response. AddHeader ("Pragma", "no-cache ");
String sInput = Request ["sColor"]. Trim ();
If (sInput. Length = 0)
Return;
String sResult = "";
String [] aColors = new string [] {"aliceblue", "antiquewith", "aquamarine", "azure", "beige", "bisque", "black ", "blanchedalmond", "blue", "blueviolet", "brass", "bronze", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate ", "copper", "coral", "cornfloewrblue", "cornsilk", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen ", "darkhaki", "darkmagenta", "darkolivegreen", "darkorchid", "darkorenge", "darkred", "darksalmon", "hidden", "hidden", "darkslategray ", "darkturquoise", "darkviotlet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "feldspar", "firebrick", "floralwhite", "forestgreen ", "fuchsia", "gainsboro", "gold", "goldenrod", "golenrod", "gostwhite", "gray", "green", "greenyellow", "honeydew ", "hotpink", "indianred", "inen", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue ", "lightcoral", "lightcyan", "lightgodenrod", "lightgodenrodyellow", "lightgray", "lightgreen", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue ", "lightslateblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "magenta", "maroom", "maroon ", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurpul", "queue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue ", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "navyblue", "oldlace", "olivedrab", "orange", "orchid ", "orengered", "palegodenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum ", "powderblue", "purple", "quartz", "red", "rosybrown", "royal blue", "saddlebrown", "salmon", "sandybrown", "scarlet ", "seagreen", "seashell", "sienna", "silver", "skyblue", "slategray", "snow", "springgreen", "steelblue", "tan ", "thistle", "tomato", "turquoise", "violet", "violetred", "wheat", "whitesmoke", "yellow", "yellowgreen "};
For (int I = 0; I <aColors. Length; I ++ ){
If (aColors [I]. IndexOf (sInput) = 0)
SResult + = aColors [I] + ",";
}
If (sResult. Length> 0) // if a match exists
SResult = sResult. Substring (0, sResult. Length-1); // remove the last ","
Response. Write (sResult );
%>
