JavaScript實(shí)現(xiàn)帶自動提示的文本框效果代碼

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html>
head>
title>Ajax實(shí)現(xiàn)自動提示的文本框/title>
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{
/* 提示框div塊的樣式 */
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;
}
/* 提示框的樣式風(fēng)格 */
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; //考慮到很多函數(shù)中都要使用
var oPopDiv; //因此采用全局變量的形式
var oColorsUl;
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function initVars(){
//初始化變量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示內(nèi)容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//顯示提示框，傳入的參數(shù)即為匹配出來的結(jié)果組成的數(shù)組
clearColors(); //每輸入一個(gè)字母就先清除原先的提示，再繼續(xù)
oPopDiv.className = "show";
var oLi;
for(var i=0;ithe_colors.length;i++){
//將匹配的提示結(jié)果逐一顯示給用戶
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠標(biāo)經(jīng)過時(shí)高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //離開時(shí)恢復(fù)原樣
}
oLi.onclick = function(){
//用戶點(diǎn)擊某個(gè)匹配項(xiàng)時(shí)，設(shè)置輸入框?yàn)樵擁?xiàng)的值
oInputField.value = this.firstChild.nodeValue;
clearColors(); //同時(shí)清除提示框
}
}
}
function findColors(){
initVars(); //初始化變量
if(oInputField.value.length > 0){
createXMLHttpRequest(); //將用戶輸入發(fā)送給服務(wù)器
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); //顯示服務(wù)器結(jié)果
}
else
clearColors();
}
}
xmlHttp.send(null);
}
else
clearColors(); //無輸入時(shí)清除提示框（例如用戶按del鍵）
}
/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>

%@ 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;iaColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0) //如果有匹配項(xiàng)
sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”號
Response.Write(sResult);
%>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html>
head>
title>jQuery實(shí)現(xiàn)自動提示的文本框/title>
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{
/* 提示框div塊的樣式 */
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;
}
/* 提示框的樣式風(fēng)格 */
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; //考慮到很多函數(shù)中都要使用
var oPopDiv; //因此采用全局變量的形式
var oColorsUl;
function initVars(){
//初始化變量
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUl = $("#colors_ul");
}
function clearColors(){
//清除提示內(nèi)容
oColorsUl.empty();
oPopDiv.removeClass("show");
}
function setColors(the_colors){
//顯示提示框，傳入的參數(shù)即為匹配出來的結(jié)果組成的數(shù)組
clearColors(); //每輸入一個(gè)字母就先清除原先的提示，再繼續(xù)
oPopDiv.addClass("show");
for(var i=0;ithe_colors.length;i++)
//將匹配的提示結(jié)果逐一顯示給用戶
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(); //初始化變量
if(oInputField.val().length > 0){
//獲取異步數(shù)據(jù)
$.get("14-10.aspx",{sColor:oInputField.val()},
function(data){
var aResult = new Array();
if(data.length > 0){
aResult = data.split(",");
setColors(aResult); //顯示服務(wù)器結(jié)果
}
else
clearColors();
});
}
else
clearColors(); //無輸入時(shí)清除提示框（例如用戶按del鍵）
}
/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>

%@ 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;iaColors.Length;i++){
if(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ",";
}
if(sResult.Length>0) //如果有匹配項(xiàng)
sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”號
Response.Write(sResult);
%>