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教程