简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > 後端開發 > php教程 > 主體

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

WBOY
發布： 2016-07-25 09:12:45
原創
1181 人瀏覽過

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

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

  5. Ajax實作自動提示的文字方塊_bbs.it-home.org
  11. Color:
複製程式碼

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

  4. Response.CacheControl = "無快取";
  5. Response.AddHeader("Pragma","no-cache");
  6. string sInput = Request[ "sColor"].Trim();
  7. if(sInput.Length == 0)
  8. return;
  9. 字串sResult = "";
  10. string[] aColors = new string[]{" aliceblue","antiquewith","海藍寶石","天藍色","米色","濃湯","黑色","blanchedalmond","藍色","藍紫色","黃銅",
  11. "青銅色","棕色","burlywood","cadetblue","黃綠色","巧克力","銅","珊瑚色","cornfloewrblue","玉米絲", "青色",
  12. "深藍色","深青色","darkgoldenrod","暗灰色","深綠色","深卡其色","darkmagenta","darkolivegreen","darkorchid",
  13. "darkorenge ", “深紅色”、“深鮭魚色”、“深海綠”、“深板藍”、“深板灰色”、“深綠松石色”、“深紫羅蘭色”、“深粉色”、
  14. 「深天藍」、「暗灰色」、「道奇藍」、「長石」 ,"firebrick","floralwhite","forestgreen","紫紅色","gainsboro","gold","goldenrod",
  15. "golenrod","gostwhite","gray","green","greenyellow ","蜜露","熱粉紅","印度紅","inen","象牙色","卡其色","薰衣草色",
  16. "薰衣草腮紅","草坪綠","檸檬雪紡","淺藍色"," 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. 「中海綠」、「中石板」、「中春綠」、「中綠松石」、「中紫紅色」、「午夜藍」、「薄荷奶油色」、
  20. 「迷霧玫瑰色」、「鹿皮鞋」、「納瓦荷白」、 「海軍藍」 ,"海軍藍","oldlace","olivedrab","橙色","蘭花","orengered","palegodenrod",
  21. "淡綠色","淡綠松石色","淡紫紅色","木瓜鞭","桃泡芙"、"秘魯"、"粉紅色"、"梅紅色"、"粉藍色"、"紫色"、"石英"、"紅色"、
  22. "玫瑰棕色"、"皇家藍色"、"馬鞍棕色"、"鮭魚色"、"沙棕色」、“猩紅色”、“海綠色”、“貝殼色”、“赭色”、“銀色” 、「天藍色」、「石板灰色」、
  23. 「雪色」、「春綠」、「鋼藍」、「棕褐色」、 「薊」、「番茄」、「綠松石」、「紫羅蘭」、「紫羅蘭紅」、「小麥」、「白煙」、「黃」、「黃綠」}；
  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 實作。 客戶端：

  5. jQuery實作自動提示的文字方塊
    9. "));
  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. }
  39. Color:
    複製程式碼

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

    4. Response.CacheControl = "無快取";
    5. Response.AddHeader("Pragma","no-cache");
    6. string sInput = Request[ "sColor"].Trim();
    7. if(sInput.Length == 0)
    8. return;
    9. 字串sResult = "";
    10. string[] aColors = new string[]{" aliceblue","antiquewith","海藍寶石","天藍色","米色","濃湯","黑色","blanchedalmond","藍色","藍紫色","黃銅","青銅",
    11. "棕色","burlywood","cadetblue","黃綠色","巧克力","銅","珊瑚色","cornfloewrblue","玉米絲", "青色","深藍色","深青色",
    12. "darkgoldenrod","darkgray","深綠色","深卡其色","darkmagenta","darkolivegreen","darkorchid","darkorenge","darkred" ,"深鮭魚色",
    13. "深海綠","深板藍","深板灰色","深綠松石","深紫羅蘭","深粉紅","深天藍","暗灰色","道奇藍",
    14. "長石" ,"firebrick","floralwhite","forestgreen","紫紅色","gainsboro","gold","goldenrod","golenrod"," gostwhite","gray","green",
    15. "greenyellow ","蜜露","粉紅色","印度紅","艾寧","象牙色","卡其色","薰衣草色","薰衣草腮紅","草坪綠","檸檬雪紡",
    16. "淺藍色"," lightcoral","lightcyan","lightgodenrod","lightgodenrodyellow","lightgray"," lightgreen","lightpink","lightsalmon",
    17. "lightseagreen","lightskyblue","lightslateblue","lightslategray", "lightsteelblue","lightyellow","lime","limegreen","magenta",
    18. "洋紅色","maroom","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurpul" ,"mediumseagreen",
    19. "mediumslateblue","mediumspringgreen","mediumquoisegreen","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringise","mediumspringS"," ,"mediumvioletred","midnightblue","mintcream","mistyrose",
    20. "鹿皮鞋","navajowhite","海軍藍" ,"navyblue","oldlace","olivedrab","orange", "orchid","orengered","palegodenrod","palegreen",
    21. "paleturquoise","palevioletred","papayawhip","peachpuff "、"秘魯"、"粉紅色"、"梅紅色"、"粉藍色"、"紫色"、"石英"、"紅色"、"玫瑰棕色"、
    22. "寶藍色"、"馬鞍棕色"、"鮭魚色"、"沙棕色」、「猩紅色」、 「海綠色」、「貝殼色」、「赭色」、「銀色」、「天藍色」、「石板灰色」、「雪色」、
    23. 「春綠色」、「鋼藍色」、「棕褐色」、 「薊」、「番茄」、「綠松石」、「紫羅蘭」、「紫羅蘭」、「小麥」、「白煙」、「黃色」、「黃綠」}；
    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. %>
    複製程式碼


    相關標籤：
    Js实现带自动提示的文本框效果
    來源：php.cn
    上一篇：php數組實作多條件查詢 php字串分割 下一篇：js取得type=radio單選按鈕中的值
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    如何使文字在點擊時變成新元素（如分隔線）？ 我正在嘗試找到一種方法，使頁面上的某些文字在單擊時變成分隔符號/新元素。我不知道如何解釋它，但是就像，想像一個下面帶有標題的圖像-單擊標題，然後上面的圖像變得像一個文本框/不同的圖...
    來自於 2024-04-04 11:21:03
    0
    1
    3580
    在 php 表單文字區域欄位中修剪和計算手機號碼 我的表單中有一個文字區域字段，我可以在其中複製貼上手機號碼。每行一個號碼，像這樣我可以複製和貼上數百個手機號碼以在該表單中提交。我想修剪該字段，複製貼上後我只想保留10位數字。僅應...
    來自於 2024-03-31 08:46:11
    0
    1
    314
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！