Text Box automatically prompted by jquery (like baidu, google Search)
Text Box automatically prompted by jquery (like baidu, google Search)
<! 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. mouseo tutorial ver {
Background-color: # 004a7e;
Color: # ffffff;
}
-->
</Style>
<Script language = "webpage effects" src = "jquery. min. webpage effects"> </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.asp tutorial x", {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>
Asp.net tutorial File
<% @ 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", "deeps tutorial kyblue", "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", "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 );
%>
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
