Js實現帶有自動提示的文字方塊效果

分享二個自動提示的文字方塊效果的js實作程式碼。

例一，直接編寫AJAX 實作。 客戶端：

Ajax實作自動提示的文字方塊_bbs.it-home.org





 Color:

複製程式碼

伺服器端（9-10.aspx ）：

Response.CacheControl = "無快取";
Response.AddHeader("Pragma","no-cache");
string sInput = Request[ "sColor"].Trim();
if(sInput.Length == 0)
return;
字串sResult = "";
string[] aColors = new string[]{" aliceblue","antiquewith","海藍寶石","天藍色","米色","濃湯","黑色","blanchedalmond","藍色","藍紫色","黃銅",
"青銅色","棕色","burlywood","cadetblue","黃綠色","巧克力","銅","珊瑚色","cornfloewrblue","玉米絲", "青色",
"深藍色","深青色","darkgoldenrod","暗灰色","深綠色","深卡其色","darkmagenta","darkolivegreen","darkorchid",
"darkorenge ", “深紅色”、“深鮭魚色”、“深海綠”、“深板藍”、“深板灰色”、“深綠松石色”、“深紫羅蘭色”、“深粉色”、
「深天藍」、「暗灰色」、「道奇藍」、「長石」 ,"firebrick","floralwhite","forestgreen","紫紅色","gainsboro","gold","goldenrod",
"golenrod","gostwhite","gray","green","greenyellow ","蜜露","熱粉紅","印度紅","inen","象牙色","卡其色","薰衣草色",
"薰衣草腮紅","草坪綠","檸檬雪紡","淺藍色"," lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow"," lightgray",
"lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow",
"lime"," limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,
「中海綠」、「中石板」、「中春綠」、「中綠松石」、「中紫紅色」、「午夜藍」、「薄荷奶油色」、
「迷霧玫瑰色」、「鹿皮鞋」、「納瓦荷白」、 「海軍藍」 ,"海軍藍","oldlace","olivedrab","橙色","蘭花","orengered","palegodenrod",
"淡綠色","淡綠松石色","淡紫紅色","木瓜鞭","桃泡芙"、"秘魯"、"粉紅色"、"梅紅色"、"粉藍色"、"紫色"、"石英"、"紅色"、
"玫瑰棕色"、"皇家藍色"、"馬鞍棕色"、"鮭魚色"、"沙棕色」、“猩紅色”、“海綠色”、“貝殼色”、“赭色”、“銀色” 、「天藍色」、「石板灰色」、
「雪色」、「春綠」、「鋼藍」、「棕褐色」、 「薊」、「番茄」、「綠松石」、「紫羅蘭」、「紫羅蘭紅」、「小麥」、「白煙」、「黃」、「黃綠」}；
for(int i=0;iif( aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ", ”;
}
if(sResult.Length>0) //如果有符合項目
sResult = sResult.Substring(0,sResult.Length-1); // 去掉最後一個「,」號碼
Response.Write(sResult);
%>

例二，使用jQuery 實作。 客戶端：

jQuery實作自動提示的文字方塊



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){
//取得非同步資料
$.get("14-10.aspx",{sColor:oInputField.val()},
function(data){
 var aResult = new Array();
if(data.length > 0){
aResult = data.split(",");
setColors(aResult); //顯示伺服器結果
 } bbs.it-home.org
else
clearColors();
});
}
else
clearColors(); //無輸入時清除提示框（例如使用者按del鍵）
}




 Color:

複製程式碼

伺服器端（14-10.aspx ）：

Response.CacheControl = "無快取";
Response.AddHeader("Pragma","no-cache");
string sInput = Request[ "sColor"].Trim();
if(sInput.Length == 0)
return;
字串sResult = "";
string[] aColors = new string[]{" aliceblue","antiquewith","海藍寶石","天藍色","米色","濃湯","黑色","blanchedalmond","藍色","藍紫色","黃銅","青銅",
"棕色","burlywood","cadetblue","黃綠色","巧克力","銅","珊瑚色","cornfloewrblue","玉米絲", "青色","深藍色","深青色",
"darkgoldenrod","darkgray","深綠色","深卡其色","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred" ,"深鮭魚色",
"深海綠","深板藍","深板灰色","深綠松石","深紫羅蘭","深粉紅","深天藍","暗灰色","道奇藍",
"長石" ,"firebrick","floralwhite","forestgreen","紫紅色","gainsboro","gold","goldenrod","golenrod"," gostwhite","gray","green",
"greenyellow ","蜜露","粉紅色","印度紅","艾寧","象牙色","卡其色","薰衣草色","薰衣草腮紅","草坪綠","檸檬雪紡",
"淺藍色"," lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray"," lightgreen","lightpink","lightsalmon",
"lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow","lime","limegreen","magenta",
"洋紅色","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,"mediumseagreen",
"mediumslateblue","mediumspringgreen","mediumquoisegreen","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringS"," ,"mediumvioletred","midnightblue","mintcream","mistyrose",
"鹿皮鞋","navajowhite","海軍藍" ,"navyblue","oldlace","olivedrab","orange", "orchid","orengered","palegodenrod","palegreen",
"paleturquoise","palevioletred","papayawhip","peachpuff "、"秘魯"、"粉紅色"、"梅紅色"、"粉藍色"、"紫色"、"石英"、"紅色"、"玫瑰棕色"、
"寶藍色"、"馬鞍棕色"、"鮭魚色"、"沙棕色」、「猩紅色」、 「海綠色」、「貝殼色」、「赭色」、「銀色」、「天藍色」、「石板灰色」、「雪色」、
「春綠色」、「鋼藍色」、「棕褐色」、 「薊」、「番茄」、「綠松石」、「紫羅蘭」、「紫羅蘭」、「小麥」、「白煙」、「黃色」、「黃綠」}；
for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
sResult += aColors[i] + ", 」;
}
if(sResult.Length>0) //如果有匹配項
sResult = sResult.Substring(0,sResult.Length-1); // 去掉最後一個「,」號碼
Response.Write (sResult);
%>