Example 1: Write AJAX implementation directly.
Client:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>Ajax implements automatic prompt text box</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* Style of 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 prompt box div block */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#{
/* Show the border of the prompt box */
border:1px solid #004a7e;
}
#{
/* Hide the border of the prompt box */
border:none;
}
/* The style of the prompt box */
ul{
list-style:none;
margin:0px; padding:0px;
}
{
background-color:#004a7e;
color:#FFFFFF;
}
{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; // Consider that many functions need to be used
var oPopDiv; //Therefore, the form of global variables is adopted
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
if()
xmlHttp = new ActiveXObject("");
else if()
xmlHttp = new XMLHttpRequest();
}
function initVars(){
//Initialize variable
oInputField = ["myForm1"].colors;
oPopDiv = ("popup");
oColorsUl = ("colors_ul");
}
function clearColors(){
//Clear the prompt content
for(var i=-1;i>=0;i--)
([i]);
= "hide";
}
function setColors(the_colors){
//Show the prompt box, the passed parameters are an array of matching results.
clearColors(); //Every time you enter a letter, clear the original prompt first and then continue
= "show";
var oLi;
for(var i=0;i<the_colors.length;i++){
//Show the matching prompt results to the user one by one
oLi = ("li");
(oLi);
((the_colors[i]));
= function(){
= "mouseOver"; //Highlight when the mouse passes
}
= function(){
= "mouseOut"; //Restore to its original state when leaving
}
= function(){
// When the user clicks on a match, set the input box to the value of the item
= ;
clearColors(); //Clear the prompt box at the same time
}
}
}
function findColors(){
initVars(); //Initialize variable
if( > 0){
createXMLHttpRequest(); //Send user input to the server
var sUrl = "?sColor=" + + "×tamp=" + new Date().getTime();
("GET",sUrl,true);
= function(){
if( == 4 && == 200){
var aResult = new Array();
if(){
aResult = (",");
setColors(aResult); //Show server results
}
else
clearColors();
}
}
(null);
}
else
clearColors(); //Clear the prompt box when there is no input (for example, the user presses the del key)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" onkeyup="findColors();" />
</form>
<div >
<ul ></ul>
</div>
</body>
</html>
Server side ():
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="" %>
<%
= "no-cache";
("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if( == 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<;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(>0) //If there is a match
sResult = (0,-1); //Remove the last "," sign
(sResult);
%>
Example 2: Use jQuery to implement.
Client:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>jQuery implements automatic prompt text box</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* Style of 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 prompt box div block */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#{
/* Show the border of the prompt box */
border:1px solid #004a7e;
}
/* The style of the prompt box */
ul{
list-style:none;
margin:0px; padding:0px;
color:#004a7e;
}
{
background-color:#004a7e;
color:#FFFFFF;
}
-->
</style>
<script language="javascript" src=""></script>
<script language="javascript">
var oInputField; // Consider that many functions need to be used
var oPopDiv; //Therefore, the form of global variables is adopted
var oColorsUl;
function initVars(){
//Initialize variable
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUl = $("#colors_ul");
}
function clearColors(){
//Clear the prompt content
();
("show");
}
function setColors(the_colors){
//Show the prompt box, the passed parameters are an array of matching results.
clearColors(); //Every time you enter a letter, clear the original prompt first and then continue
("show");
for(var i=0;i<the_colors.length;i++)
//Show the matching prompt results to the user one by one
($("<li>"+the_colors[i]+"</li>"));
("li").click(function(){
($(this).text());
clearColors();
}).hover(
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}
function findColors(){
initVars(); //Initialize variable
if(().length > 0){
//Get asynchronous data
$.get("",{sColor:()},
function(data){
var aResult = new Array();
if( > 0){
aResult = (",");
setColors(aResult); //Show server results
}
else
clearColors();
});
}
else
clearColors(); //Clear the prompt box when there is no input (for example, the user presses the del key)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" onkeyup="findColors();" />
</form>
<div >
<ul ></ul>
</div>
</body>
</html>
Server side ():
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="" %>
<%
= "no-cache";
("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if( == 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<;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(>0) //If there is a match
sResult = (0,-1); //Remove the last "," sign
(sResult);
%>
Client:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>Ajax implements automatic prompt text box</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* Style of 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 prompt box div block */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#{
/* Show the border of the prompt box */
border:1px solid #004a7e;
}
#{
/* Hide the border of the prompt box */
border:none;
}
/* The style of the prompt box */
ul{
list-style:none;
margin:0px; padding:0px;
}
{
background-color:#004a7e;
color:#FFFFFF;
}
{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; // Consider that many functions need to be used
var oPopDiv; //Therefore, the form of global variables is adopted
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
if()
xmlHttp = new ActiveXObject("");
else if()
xmlHttp = new XMLHttpRequest();
}
function initVars(){
//Initialize variable
oInputField = ["myForm1"].colors;
oPopDiv = ("popup");
oColorsUl = ("colors_ul");
}
function clearColors(){
//Clear the prompt content
for(var i=-1;i>=0;i--)
([i]);
= "hide";
}
function setColors(the_colors){
//Show the prompt box, the passed parameters are an array of matching results.
clearColors(); //Every time you enter a letter, clear the original prompt first and then continue
= "show";
var oLi;
for(var i=0;i<the_colors.length;i++){
//Show the matching prompt results to the user one by one
oLi = ("li");
(oLi);
((the_colors[i]));
= function(){
= "mouseOver"; //Highlight when the mouse passes
}
= function(){
= "mouseOut"; //Restore to its original state when leaving
}
= function(){
// When the user clicks on a match, set the input box to the value of the item
= ;
clearColors(); //Clear the prompt box at the same time
}
}
}
function findColors(){
initVars(); //Initialize variable
if( > 0){
createXMLHttpRequest(); //Send user input to the server
var sUrl = "?sColor=" + + "×tamp=" + new Date().getTime();
("GET",sUrl,true);
= function(){
if( == 4 && == 200){
var aResult = new Array();
if(){
aResult = (",");
setColors(aResult); //Show server results
}
else
clearColors();
}
}
(null);
}
else
clearColors(); //Clear the prompt box when there is no input (for example, the user presses the del key)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" onkeyup="findColors();" />
</form>
<div >
<ul ></ul>
</div>
</body>
</html>
Server side ():
Copy the codeThe code is as follows:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="" %>
<%
= "no-cache";
("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if( == 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<;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(>0) //If there is a match
sResult = (0,-1); //Remove the last "," sign
(sResult);
%>
Example 2: Use jQuery to implement.
Client:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html>
<head>
<title>jQuery implements automatic prompt text box</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* Style of 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 prompt box div block */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#{
/* Show the border of the prompt box */
border:1px solid #004a7e;
}
/* The style of the prompt box */
ul{
list-style:none;
margin:0px; padding:0px;
color:#004a7e;
}
{
background-color:#004a7e;
color:#FFFFFF;
}
-->
</style>
<script language="javascript" src=""></script>
<script language="javascript">
var oInputField; // Consider that many functions need to be used
var oPopDiv; //Therefore, the form of global variables is adopted
var oColorsUl;
function initVars(){
//Initialize variable
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUl = $("#colors_ul");
}
function clearColors(){
//Clear the prompt content
();
("show");
}
function setColors(the_colors){
//Show the prompt box, the passed parameters are an array of matching results.
clearColors(); //Every time you enter a letter, clear the original prompt first and then continue
("show");
for(var i=0;i<the_colors.length;i++)
//Show the matching prompt results to the user one by one
($("<li>"+the_colors[i]+"</li>"));
("li").click(function(){
($(this).text());
clearColors();
}).hover(
function(){$(this).addClass("mouseOver");},
function(){$(this).removeClass("mouseOver");}
);
}
function findColors(){
initVars(); //Initialize variable
if(().length > 0){
//Get asynchronous data
$.get("",{sColor:()},
function(data){
var aResult = new Array();
if( > 0){
aResult = (",");
setColors(aResult); //Show server results
}
else
clearColors();
});
}
else
clearColors(); //Clear the prompt box when there is no input (for example, the user presses the del key)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" onkeyup="findColors();" />
</form>
<div >
<ul ></ul>
</div>
</body>
</html>
Server side ():
Copy the codeThe code is as follows:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="" %>
<%
= "no-cache";
("Pragma","no-cache");
string sInput = Request["sColor"].Trim();
if( == 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<;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(>0) //If there is a match
sResult = (0,-1); //Remove the last "," sign
(sResult);
%>