当前位置:Gxlcms > PHP教程 > Js实现带自动提示的文本框效果

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

时间:2021-07-01 10:21:17 帮助过:12人阅读

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

例一,直接编写AJAX 实现。 客户端:

  1. Ajax实现自动提示的文本框_bbs.it-home.org

    服务器端(9-10.aspx ):

    1. <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
    2. <%@ Import Namespace="System.Data" %>
    3. <%
    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 实现。 客户端:

    1. jQuery实现自动提示的文本框

      服务器端(14-10.aspx ):

      1. <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
      2. <%@ Import Namespace="System.Data" %>
      3. <%
      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. %>

      人气教程排行