Js实现带自动提示的文本框效果

分享二个自动提示的文本框效果的js实现代码。

例一，直接编写AJAX 实现。 客户端：

10. Color:

复制代码

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

4. Response.CacheControl = "no-cache";
5. Response.AddHeader("Pragma","no-cache");
6. string sInput = Request["sColor"].Trim();
7. if(sInput.Length == 0)
8. return;
9. string sResult = "";
10. string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass",
11. "bronze","brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan",
12. "darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid",
13. "darkorenge","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink",
14. "deepskyblue","dimgray","dodgerblue","feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod",
15. "golenrod","gostwhite","gray","green","greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender",
16. "lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray",
17. "lightgreen","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow",
18. "lime","limegreen","magenta","magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul",
19. "mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream",
20. "mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod",
21. "palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red",
22. "rosybrown","royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray",
23. "snow","springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};
24. for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
25. sResult += aColors[i] + ",";
26. }
27. if(sResult.Length>0) //如果有匹配项
28. sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
29. Response.Write(sResult);
30. %>

复制代码

例二，使用jQuery 实现。 客户端：

8. "));
9. oColorsUl.find("li").click(function(){
10. oInputField.val($(this).text());
11. clearColors();
12. }).hover(
13. function(){$(this).addClass("mouseOver");},
14. function(){$(this).removeClass("mouseOver");}
15. );
16. }
17. function findColors(){
18. initVars(); //初始化变量
19. if(oInputField.val().length > 0){
20. //获取异步数据
21. $.get("14-10.aspx",{sColor:oInputField.val()},
22. function(data){
23. var aResult = new Array();
24. if(data.length > 0){
25. aResult = data.split(",");
26. setColors(aResult); //显示服务器结果
27. } bbs.it-home.org
28. else
29. clearColors();
30. });
31. }
32. else
33. clearColors(); //无输入时清除提示框（例如用户按del键）
34. }
38. Color:

复制代码

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

4. Response.CacheControl = "no-cache";
5. Response.AddHeader("Pragma","no-cache");
6. string sInput = Request["sColor"].Trim();
7. if(sInput.Length == 0)
8. return;
9. string sResult = "";
10. string[] aColors = new string[]{"aliceblue","antiquewith","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brass","bronze",
11. "brown","burlywood","cadetblue","chartreuse","chocolate","copper","coral","cornfloewrblue","cornsilk","cyan","darkblue","darkcyan",
12. "darkgoldenrod","darkgray","darkgreen","darkhaki","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred","darksalmon",
13. "darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue",
14. "feldspar","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","gold","goldenrod","golenrod","gostwhite","gray","green",
15. "greenyellow","honeydew","hotpink","indianred","inen","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon",
16. "lightblue","lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray","lightgreen","lightpink","lightsalmon",
17. "lightseagreen","lightskyblue","lightslateblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","magenta",
18. "magenta","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul","mediumseagreen",
19. "mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose",
20. "moccasin","navajowhite","navy","navyblue","oldlace","olivedrab","orange","orchid","orengered","palegodenrod","palegreen",
21. "paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","quartz","red","rosybrown",
22. "royalblue","saddlebrown","salmon","sandybrown","scarlet","seagreen","seashell","sienna","silver","skyblue","slategray","snow",
23. "springgreen","steelblue","tan","thistle","tomato","turquoise","violet","violetred","wheat","whitesmoke","yellow","yellowgreen"};
24. for(int i=0;iif(aColors[i].IndexOf(sInput) == 0)
25. sResult += aColors[i] + ",";
26. }
27. if(sResult.Length>0) //如果有匹配项
28. sResult = sResult.Substring(0,sResult.Length-1); //去掉最后的“,”号
29. Response.Write(sResult);
30. %>

复制代码