Example one: Write Ajax implementations directly.
Client:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>ajax text box to implement automatic prompts </title>
<style>
<!--
body{
Font-family:arial, Helvetica, Sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* The 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 {
/* Hint box div block Style * *
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 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; Consider the use of a number of functions
var Opopdiv; So take the form of global variables
var Ocolorsul;
var xmlHttp;
function Createxmlhttprequest () {
if (window. ActiveXObject)
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
else if (window. XMLHttpRequest)
XmlHttp = new XMLHttpRequest ();
}
function Initvars () {
Initializing variables
Oinputfield = document.forms["MyForm1"].colors;
Opopdiv = document.getElementById ("popup");
Ocolorsul = document.getElementById ("Colors_ul");
}
function Clearcolors () {
Clear the contents of the hint
for (Var i=ocolorsul.childnodes.length-1;i>=0;i--)
Ocolorsul.removechild (Ocolorsul.childnodes[i]);
Opopdiv.classname = "Hide";
}
function Setcolors (the_colors) {
Displays the prompt box, the incoming argument is an array of matched results
Clearcolors (); Clear the previous prompt before each letter is entered and continue
Opopdiv.classname = "show";
var oLi;
for (Var i=0;i<the_colors.length;i++) {
Displays the results of the matching prompts to the user individually
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"; Return as it was when you left
}
Oli.onclick = function () {
When the user clicks on a match, 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 (); Initializing variables
if (OInputField.value.length > 0) {
Createxmlhttprequest (); Send user input to server
var surl = "9-10.aspx?scolor=" + oinputfield.value + "×tamp=" + 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); Show server Results
}
Else
Clearcolors ();
}
}
Xmlhttp.send (NULL);
}
Else
Clearcolors (); Clear prompt box without input (for example, user presses del key)
}
</script>
<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>
Server Side (9-10.aspx):
Copy Code code 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 "," Darkseagreen "," Darkslateblue "," Darkslategray "," Darkturquoise "," Darkviolet "," 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 "," magenta "," maroom "," maroon "," Mediumaquamarine "," MediumBlue "," Mediumorchid "," Mediumpurpul "," Mediumseagreen "," Mediumslateblue "," 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 "," Royalblue "," 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 there is a match
Sresult = sresult.substring (0,sresult.length-1); Get rid of the last "," number.
Response.Write (Sresult);
%>
Example two: using jquery implementation.
Client:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery text box to implement automatic prompts </title>
<style>
<!--
body{
Font-family:arial, Helvetica, Sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* The 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 {
/* Hint box div block Style * *
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 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; Consider the use of a number of functions
var Opopdiv; So take the form of global variables
var Ocolorsul;
function Initvars () {
Initializing variables
Oinputfield = $ ("#colors");
Opopdiv = $ ("#popup");
Ocolorsul = $ ("#colors_ul");
}
function Clearcolors () {
Clear the contents of the hint
Ocolorsul.empty ();
Opopdiv.removeclass ("show");
}
function Setcolors (the_colors) {
Displays the prompt box, the incoming argument is an array of matched results
Clearcolors (); Clear the previous prompt before each letter is entered and continue
Opopdiv.addclass ("show");
for (Var i=0;i<the_colors.length;i++)
Displays the results of the matching prompts to the user individually
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 (); Initializing variables
if (Oinputfield.val (). length > 0) {
Getting asynchronous data
$.get ("14-10.aspx", {SColor:oInputField.val ()},
function (data) {
var aresult = new Array ();
if (Data.length > 0) {
Aresult = Data.split (",");
Setcolors (Aresult); Show server Results
}
Else
Clearcolors ();
});
}
Else
Clearcolors (); Clear prompt box without input (for example, user presses del key)
}
</script>
<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>
Server Side (14-10.aspx):
Copy Code code 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 "," Darkseagreen "," Darkslateblue "," Darkslategray "," Darkturquoise "," Darkviolet "," 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 "," magenta "," maroom "," maroon "," Mediumaquamarine "," MediumBlue "," Mediumorchid "," Mediumpurpul "," Mediumseagreen "," Mediumslateblue "," 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 "," Royalblue "," 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 there is a match
Sresult = sresult.substring (0,sresult.length-1); Get rid of the last "," number.
Response.Write (Sresult);
%>
