javaScript自動補全

時間  2021-01-10
標籤 javascript css html java node sql 數據庫 數組 服務器 app 欄目 JavaScript 简体版
原文   原文鏈接

自動提示文本框首先離不開文本框<input type="text">自己、而提示框則採用<div>塊內嵌項目列表<ul>來實現。當前用戶在文本框中每輸入一個字符(onkeyup事件)時就在預約的"顏色名稱集(功能很小很小)"中查找、找到匹配的項就動態加載到<ul>中、顯示給用戶選擇、HTML代碼以下：javascript

  
  
           
  
  
    
   
   
            
   
   
  1. <body>   
    2. 
   
   
            
   
   
  2.     <form method="post" name="myForm1">   
    3. 
   
   
            
   
   
  3.         Color:<input type="text" name="colors" id="colors" onkeyup="findColors();" />   
    4. 
   
   
            
   
   
  4.     </form>   
    5. 
   
   
            
   
   
  5.     <div id="popup">   
    6. 
   
   
            
   
   
  6.         <ul id="colors_ul"></ul>   
    7. 
   
   
            
   
   
  7.     </div>   
    8. 
   
   
            
   
   
  8.   </body> 
    9.

考慮到<div>塊的位置必須出如今輸入框的下面、所以採用css的絕對定位、並設置兩個邊框屬性、一個用於有匹配結果時顯示提示框<div>、另外一個用於未查到匹配結果時隱藏提示框。相應的頁面設置和表單的css樣式以下：css

  
  
           
  
  
    
   
   
            
   
   
  1. <style>   
    2. 
   
   
            
   
   
  2.     <!--   
    3. 
   
   
            
   
   
  3.     body{   
    4. 
   
   
            
   
   
  4.         font-family: Arial,Helvetica,sans-serif;   
    5. 
   
   
            
   
   
  5.         font-size: 12px; padding: 0px; margin: 5px;   
    6. 
   
   
            
   
   
  6.     }   
    7. 
   
   
            
   
   
  7.     form{padding: 0px; margin: 0px;}   
    8. 
   
   
            
   
   
  8.     input{   
    9. 
   
   
            
   
   
  9.         /*用戶輸入框的樣式*/   
    10. 
   
   
            
   
   
  10.         font-family: Arial,Helvetica,sans-serif;   
    11. 
   
   
            
   
   
  11.         font-size: 12px; border: 1px solid #000000;   
    12. 
   
   
            
   
   
  12.         width: 200px; padding: 1px; margin: 0px;   
    13. 
   
   
            
   
   
  13.     }   
    14. 
   
   
            
   
   
  14.     #popup{   
    15. 
   
   
            
   
   
  15.         /*提示框div塊的樣式*/   
    16. 
   
   
            
   
   
  16.         position: absolute; width: 202px;   
    17. 
   
   
            
   
   
  17.         color: #004a7e; font-size: 12px;   
    18. 
   
   
            
   
   
  18.         font-family: Arial,Helvetica,sans-serif;   
    19. 
   
   
            
   
   
  19.         left: 36px; top: 25px;   
    20. 
   
   
            
   
   
  20.     }   
    21. 
   
   
            
   
   
  21.     #popup.show{   
    22. 
   
   
            
   
   
  22.         /*顯示提示框的邊框*/   
    23. 
   
   
            
   
   
  23.         border: 1px solid #004a7e;   
    24. 
   
   
            
   
   
  24.     }   
    25. 
   
   
            
   
   
  25.     #popup.hide{   
    26. 
   
   
            
   
   
  26.         /*隱藏提示框的邊框*/   
    27. 
   
   
            
   
   
  27.         border: none;      
    28. 
   
   
            
   
   
  28.     }   
    29. 
   
   
            
   
   
  29.         -->   
    30. 
   
   
            
   
   
  30.  </style>   
    31.

當用戶在文本框中輸入任意一個字符時、則在預約好的"顏色名稱集"中搜索。若是找到匹配的項則存在一個數組中、並傳遞給顯示提示框的函數setColors()、不然利用函數clearColors()清除提示框、代碼以下：html

  
  
           
  
  
    
   
   
            
   
   
  1. var oInputField;     
    2. 
   
   
            
   
   
  2.         var oPopDiv;   
    3. 
   
   
            
   
   
  3.         var oColorsUl;   
    4. 
   
   
            
   
   
  4.         var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +   
    5. 
   
   
            
   
   
  5.         "","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +   
    6. 
   
   
            
   
   
  6.         "","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];   
    7. 
   
   
            
   
   
  7.         aColors.sort();  //按字母排序   
    8. 
   
   
            
   
   
  8.         function initVars(){   
    9. 
   
   
            
   
   
  9.             //初始化變量   
    10. 
   
   
            
   
   
  10.             oInputField = document.forms["myForm1"].colors;   
    11. 
   
   
            
   
   
  11.             oPopDiv = document.getElementById("popup");   
    12. 
   
   
            
   
   
  12.             oColorsUl = document.getElementById("colors_ul");   
    13. 
   
   
            
   
   
  13.         }   
    14. 
   
   
            
   
   
  14.         function findColors(){   
    15. 
   
   
            
   
   
  15.             initVars();  //初始化變量   
    16. 
   
   
            
   
   
  16.             if(oInputField.value.length > 0){   
    17. 
   
   
            
   
   
  17.                 var aResult = new Array();  //用於存放匹配結果   
    18. 
   
   
            
   
   
  18.                 for(var i = 0 ; i < aColors.length ; i++ ){   
    19. 
   
   
            
   
   
  19.                     //必須是從單詞的開始處匹配   
    20. 
   
   
            
   
   
  20.                     if(aColors[i].indexOf(oInputField.value) == 0)   
    21. 
   
   
            
   
   
  21.                         aResult.push(aColors[i]); //加入結果   
    22. 
   
   
            
   
   
  22.                 }   
    23. 
   
   
            
   
   
  23.                 if(aResult.length > 0)  //若是有匹配的顏色則顯示出來   
    24. 
   
   
            
   
   
  24.                     setColors(aResult);   
    25. 
   
   
            
   
   
  25.                 else                        //不然就清除、用戶多輸入一個字母   
    26. 
   
   
            
   
   
  26.                     clearColors();  //就有可能從有匹配到無、到無的時候須要清除   
    27. 
   
   
            
   
   
  27.             }   
    28. 
   
   
            
   
   
  28.             else   
    29. 
   
   
            
   
   
  29.                 clearColors(); //無輸入時清除提示框   
    30. 
   
   
            
   
   
  30.         }  
    31.

所謂的"顏色名稱集合"就是一個特定的數組aColors、裏面存放了不少預約好的顏色名稱、實際運用中這個數組應該是服務器上的動態數據、明天來加上、用Ajax方式把後臺數據查詢出來、付給這個數組。其實很簡單、然而數據庫怎麼存儲、跟查詢時sql語句的拼寫、就很重要了、不過我基本上一點也不瞭解這方面的東西！java

        setColors()和clearColors()分別用來顯示和清除提示框、用戶每輸入一個字符就調用一次findColors()函數、找到匹配項時調用setColors()、不然調用clearColors()。node

        傳遞給setColors()的參數是一個數組、裏面存放着全部匹配用戶輸入的數據、所以setColors()的職責就是將這些匹配項一個個放入<li>中、並添加到<ul>裏、而clearColors()則直接清除整個提示框便可。代碼以下：sql

  
  
           
  
  
    
   
   
            
   
   
  1. function clearColors(){   
    2. 
   
   
            
   
   
  2.             //清除提示內容   
    3. 
   
   
            
   
   
  3.             for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )   
    4. 
   
   
            
   
   
  4.                 oColorsUl.removeChild(oColorsUl.childNodes[i]);   
    5. 
   
   
            
   
   
  5.             oPopDiv.className = "hide" ;   
    6. 
   
   
            
   
   
  6.         }   
    7. 
   
   
            
   
   
  7.            
    8. 
   
   
            
   
   
  8.         function setColors(the_colors){   
    9. 
   
   
            
   
   
  9.             //顯示提示框、傳入的參數即爲匹配出來的結果組成的數組   
    10. 
   
   
            
   
   
  10.             clearColors();  //沒輸入一個字母就先清楚原先的提示、再繼續   
    11. 
   
   
            
   
   
  11.             oPopDiv.className = "show" ;   
    12. 
   
   
            
   
   
  12.             var oLi ;   
    13. 
   
   
            
   
   
  13.             for(var i = 0 ; i < the_colors.length ; i++ ){   
    14. 
   
   
            
   
   
  14.                 //將匹配的提示結果逐一顯示給用戶   
    15. 
   
   
            
   
   
  15.                 oLi = document.createElement("li");   
    16. 
   
   
            
   
   
  16.                 oColorsUl.appendChild(oLi);   
    17. 
   
   
            
   
   
  17.                 oLi.appendChild(document.createTextNode(the_colors[i]));   
    18. 
   
   
            
   
   
  18.                    
    19. 
   
   
            
   
   
  19.                 oLi.onmouseover = function(){   
    20. 
   
   
            
   
   
  20.                     this.className = "mouseOver" ;  //鼠標指針通過時高亮   
    21. 
   
   
            
   
   
  21.                 }   
    22. 
   
   
            
   
   
  22.                 oLi.onmouseout = function(){   
    23. 
   
   
            
   
   
  23.                     this.className = "mouseOut" ;   //鼠標指針離開時恢復原樣   
    24. 
   
   
            
   
   
  24.                 }   
    25. 
   
   
            
   
   
  25.                 oLi.onclick = function(){   
    26. 
   
   
            
   
   
  26.                     //用戶單擊某個匹配項時、設置輸入框爲該項的值   
    27. 
   
   
            
   
   
  27.                     oInputField.value = this.firstChild.nodeValue;   
    28. 
   
   
            
   
   
  28.                     clearColors();  //同時清除提示框   
    29. 
   
   
            
   
   
  29.                 }   
    30. 
   
   
            
   
   
  30.             }   
    31. 
   
   
            
   
   
  31.         }  
    32.
在給提示框中的每一項<li>添加鼠標事件、鼠標通過時高亮顯示、單擊鼠標時則自動將選項賦給輸入框、並清空提示框。<ul>的css樣式風格以下： 

  
  
           
  
  
    
   
   
            
   
   
  1. <style>   
    2. 
   
   
            
   
   
  2.     <!--           
    3. 
   
   
            
   
   
  3.         /*提示框的樣式風格*/   
    4. 
   
   
            
   
   
  4.     ul{   
    5. 
   
   
            
   
   
  5.         list-style: none;   
    6. 
   
   
            
   
   
  6.         margin: 0px; padding: 0px;   
    7. 
   
   
            
   
   
  7.     }   
    8. 
   
   
            
   
   
  8.     li.mouseOver{   
    9. 
   
   
            
   
   
  9.         background-color: #004a7e;   
    10. 
   
   
            
   
   
  10.         color: #FFFFFF;   
    11. 
   
   
            
   
   
  11.     }   
    12. 
   
   
            
   
   
  12.     li.mouseOut{   
    13. 
   
   
            
   
   
  13.         background-color: #FFFFFF;   
    14. 
   
   
            
   
   
  14.         color: #004a7e;   
    15. 
   
   
            
   
   
  15.     }   
    16. 
   
   
            
   
   
  16.     -->   
    17. 
   
   
            
   
   
  17. </style> 
    18.

圖是運行效果、IE8跟火狐都行：數據庫

完整代碼以下：數組

  
  
           
  
  
    
   
   
            
   
   
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
    2. 
   
   
            
   
   
  2. <%   
    3. 
   
   
            
   
   
  3. String path = request.getContextPath();   
    4. 
   
   
            
   
   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    5. 
   
   
            
   
   
  5. %>   
    6. 
   
   
            
   
   
  6.    
    7. 
   
   
            
   
   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
    8. 
   
   
            
   
   
  8. <html>   
    9. 
   
   
            
   
   
  9.   <head>   
    10. 
   
   
            
   
   
  10.     <base href="<%=basePath%>">   
    11. 
   
   
            
   
   
  11.        
    12. 
   
   
            
   
   
  12.     <title>匹配用戶輸入</title>   
    13. 
   
   
            
   
   
  13.        
    14. 
   
   
            
   
   
  14.     <meta http-equiv="pragma" content="no-cache">   
    15. 
   
   
            
   
   
  15.     <meta http-equiv="cache-control" content="no-cache">   
    16. 
   
   
            
   
   
  16.     <meta http-equiv="expires" content="0">       
    17. 
   
   
            
   
   
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
    18. 
   
   
            
   
   
  18.     <meta http-equiv="description" content="This is my page">   
    19. 
   
   
            
   
   
  19.     <style>   
    20. 
   
   
            
   
   
  20.     <!--   
    21. 
   
   
            
   
   
  21.     body{   
    22. 
   
   
            
   
   
  22.         font-family: Arial,Helvetica,sans-serif;   
    23. 
   
   
            
   
   
  23.         font-size: 12px; padding: 0px; margin: 5px;   
    24. 
   
   
            
   
   
  24.     }   
    25. 
   
   
            
   
   
  25.     form{padding: 0px; margin: 0px;}   
    26. 
   
   
            
   
   
  26.     input{   
    27. 
   
   
            
   
   
  27.         /*用戶輸入框的樣式*/   
    28. 
   
   
            
   
   
  28.         font-family: Arial,Helvetica,sans-serif;   
    29. 
   
   
            
   
   
  29.         font-size: 12px; border: 1px solid #000000;   
    30. 
   
   
            
   
   
  30.         width: 200px; padding: 1px; margin: 0px;   
    31. 
   
   
            
   
   
  31.     }   
    32. 
   
   
            
   
   
  32.     #popup{   
    33. 
   
   
            
   
   
  33.         /*提示框div塊的樣式*/   
    34. 
   
   
            
   
   
  34.         position: absolute; width: 202px;   
    35. 
   
   
            
   
   
  35.         color: #004a7e; font-size: 12px;   
    36. 
   
   
            
   
   
  36.         font-family: Arial,Helvetica,sans-serif;   
    37. 
   
   
            
   
   
  37.         left: 36px; top: 25px;   
    38. 
   
   
            
   
   
  38.     }   
    39. 
   
   
            
   
   
  39.     #popup.show{   
    40. 
   
   
            
   
   
  40.         /*顯示提示框的邊框*/   
    41. 
   
   
            
   
   
  41.         border: 1px solid #004a7e;   
    42. 
   
   
            
   
   
  42.     }   
    43. 
   
   
            
   
   
  43.     #popup.hide{   
    44. 
   
   
            
   
   
  44.         /*隱藏提示框的邊框*/   
    45. 
   
   
            
   
   
  45.         border: none;      
    46. 
   
   
            
   
   
  46.     }   
    47. 
   
   
            
   
   
  47.     /*提示框的樣式風格*/   
    48. 
   
   
            
   
   
  48.     ul{   
    49. 
   
   
            
   
   
  49.         list-style: none;   
    50. 
   
   
            
   
   
  50.         margin: 0px; padding: 0px;   
    51. 
   
   
            
   
   
  51.     }   
    52. 
   
   
            
   
   
  52.     li.mouseOver{   
    53. 
   
   
            
   
   
  53.         background-color: #004a7e;   
    54. 
   
   
            
   
   
  54.         color: #FFFFFF;   
    55. 
   
   
            
   
   
  55.     }   
    56. 
   
   
            
   
   
  56.     li.mouseOut{   
    57. 
   
   
            
   
   
  57.         background-color: #FFFFFF;   
    58. 
   
   
            
   
   
  58.         color: #004a7e;   
    59. 
   
   
            
   
   
  59.     }   
    60. 
   
   
            
   
   
  60.     -->   
    61. 
   
   
            
   
   
  61.     </style>   
    62. 
   
   
            
   
   
  62.    
    63. 
   
   
            
   
   
  63.     <script type="text/javascript">   
    64. 
   
   
            
   
   
  64.        
    65. 
   
   
            
   
   
  65.         var oInputField;     
    66. 
   
   
            
   
   
  66.         var oPopDiv;   
    67. 
   
   
            
   
   
  67.         var oColorsUl;   
    68. 
   
   
            
   
   
  68.         var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +   
    69. 
   
   
            
   
   
  69.         "","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +   
    70. 
   
   
            
   
   
  70.         "","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];   
    71. 
   
   
            
   
   
  71.         aColors.sort();  //按字母排序   
    72. 
   
   
            
   
   
  72.         function initVars(){   
    73. 
   
   
            
   
   
  73.             //初始化變量   
    74. 
   
   
            
   
   
  74.             oInputField = document.forms["myForm1"].colors;   
    75. 
   
   
            
   
   
  75.             oPopDiv = document.getElementById("popup");   
    76. 
   
   
            
   
   
  76.             oColorsUl = document.getElementById("colors_ul");   
    77. 
   
   
            
   
   
  77.         }   
    78. 
   
   
            
   
   
  78.         function findColors(){   
    79. 
   
   
            
   
   
  79.             initVars();  //初始化變量   
    80. 
   
   
            
   
   
  80.             if(oInputField.value.length > 0){   
    81. 
   
   
            
   
   
  81.                 var aResult = new Array();  //用於存放匹配結果   
    82. 
   
   
            
   
   
  82.                 for(var i = 0 ; i < aColors.length ; i++ ){   
    83. 
   
   
            
   
   
  83.                     //必須是從單詞的開始處匹配   
    84. 
   
   
            
   
   
  84.                     if(aColors[i].indexOf(oInputField.value) == 0)   
    85. 
   
   
            
   
   
  85.                         aResult.push(aColors[i]); //加入結果   
    86. 
   
   
            
   
   
  86.                 }   
    87. 
   
   
            
   
   
  87.                 if(aResult.length > 0)  //若是有匹配的顏色則顯示出來   
    88. 
   
   
            
   
   
  88.                     setColors(aResult);   
    89. 
   
   
            
   
   
  89.                 else                        //不然就清除、用戶多輸入一個字母   
    90. 
   
   
            
   
   
  90.                     clearColors();  //就有可能從有匹配到無、到無的時候須要清除   
    91. 
   
   
            
   
   
  91.             }   
    92. 
   
   
            
   
   
  92.             else   
    93. 
   
   
            
   
   
  93.                 clearColors(); //無輸入時清除提示框   
    94. 
   
   
            
   
   
  94.         }   
    95. 
   
   
            
   
   
  95.            
    96. 
   
   
            
   
   
  96.            
    97. 
   
   
            
   
   
  97.         function clearColors(){   
    98. 
   
   
            
   
   
  98.             //清除提示內容   
    99. 
   
   
            
   
   
  99.             for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )   
    100. 
   
   
            
   
   
  100.                 oColorsUl.removeChild(oColorsUl.childNodes[i]);   
    101. 
   
   
            
   
   
  101.             oPopDiv.className = "hide" ;   
    102. 
   
   
            
   
   
  102.         }   
    103. 
   
   
            
   
   
  103.            
    104. 
   
   
            
   
   
  104.         function setColors(the_colors){   
    105. 
   
   
            
   
   
  105.             //顯示提示框、傳入的參數即爲匹配出來的結果組成的數組   
    106. 
   
   
            
   
   
  106.             clearColors();  //沒輸入一個字母就先清楚原先的提示、再繼續   
    107. 
   
   
            
   
   
  107.             oPopDiv.className = "show" ;   
    108. 
   
   
            
   
   
  108.             var oLi ;   
    109. 
   
   
            
   
   
  109.             for(var i = 0 ; i < the_colors.length ; i++ ){   
    110. 
   
   
            
   
   
  110.                 //將匹配的提示結果逐一顯示給用戶   
    111. 
   
   
            
   
   
  111.                 oLi = document.createElement("li");   
    112. 
   
   
            
   
   
  112.                 oColorsUl.appendChild(oLi);   
    113. 
   
   
            
   
   
  113.                 oLi.appendChild(document.createTextNode(the_colors[i]));   
    114. 
   
   
            
   
   
  114.                    
    115. 
   
   
            
   
   
  115.                 oLi.onmouseover = function(){   
    116. 
   
   
            
   
   
  116.                     this.className = "mouseOver" ;  //鼠標指針通過時高亮   
    117. 
   
   
            
   
   
  117.                 }   
    118. 
   
   
            
   
   
  118.                 oLi.onmouseout = function(){   
    119. 
   
   
            
   
   
  119.                     this.className = "mouseOut" ;   //鼠標指針離開時恢復原樣   
    120. 
   
   
            
   
   
  120.                 }   
    121. 
   
   
            
   
   
  121.                 oLi.onclick = function(){   
    122. 
   
   
            
   
   
  122.                     //用戶單擊某個匹配項時、設置輸入框爲該項的值   
    123. 
   
   
            
   
   
  123.                     oInputField.value = this.firstChild.nodeValue;   
    124. 
   
   
            
   
   
  124.                     clearColors();  //同時清除提示框   
    125. 
   
   
            
   
   
  125.                 }   
    126. 
   
   
            
   
   
  126.             }   
    127. 
   
   
            
   
   
  127.         }   
    128. 
   
   
            
   
   
  128.            
    129. 
   
   
            
   
   
  129.     </script>   
    130. 
   
   
            
   
   
  130.    
    131. 
   
   
            
   
   
  131.   </head>   
    132. 
   
   
            
   
   
  132.      
    133. 
   
   
            
   
   
  133.   <body>   
    134. 
   
   
            
   
   
  134.     <form method="post" name="myForm1">   
    135. 
   
   
            
   
   
  135.         Color:<input type="text" name="colors" id="colors" onkeyup="findColors();" />   
    136. 
   
   
            
   
   
  136.     </form>   
    137. 
   
   
            
   
   
  137.     <div id="popup">   
    138. 
   
   
            
   
   
  138.         <ul id="colors_ul"></ul>   
    139. 
   
   
            
   
   
  139.     </div>   
    140. 
   
   
            
   
   
  140.   </body>   
    141. 
   
   
            
   
   
  141. </html>
    142.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程