JavaScript实现搜索框智能提示上下移动效果


最近公司网站首页搜索框改进,需要在智能提示列表上加上支持键盘上下键移动的效果。


搞了一晚上,下面呈上纯javascript代码,没有用到jquery等其他类库。


以下仅供自己收藏,贴上来希望能起到抛砖引玉的作用。





  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         ul,li{list-style-type:none;}  
  8.     </style>  
  9.     <script type="text/javascript" language="javascript">  
  10.         var currentSelIndex = -1;  
  11.         var oldSelIndex = -1;  
  12.  
  13.         function selectItem(keyword, event) {  
  14.             if (keyword == "") {  
  15.                 document.getElementById("ulItems").style.display = "none";  
  16.                 return;  
  17.             }  
  18.             else {  
  19.                 var liLength = document.getElementById("ulItems").getElementsByTagName("li").length; //获取列表数量  
  20.                 if ((event.keyCode == 38 || event.keyCode == 40) && document.getElementById("ulItems").style.display != "none") {  
  21.                     if (liLength > 0) {  
  22.                         oldSelIndex = currentSelIndex;  
  23.                         //上移  
  24.                         if (event.keyCode == 38) {  
  25.                             if (currentSelIndex == -1) {  
  26.                                 currentSelIndex = liLength - 1;  
  27.                             }  
  28.                             else {  
  29.                                 currentSelIndex = currentSelIndex - 1;  
  30.                                 if (currentSelIndex < 0) {  
  31.                                     currentSelIndex = liLength - 1;  
  32.                                 }  
  33.                             }  
  34.                             if (currentSelIndex != -1) {  
  35.                                 document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";  
  36.                                 document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
  37.                             }  
  38.                             if (oldSelIndex != -1) {  
  39.                                 document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";  
  40.                             }  
  41.                         }  
  42.                         //下移  
  43.                         if (event.keyCode == 40) {  
  44.                             if (currentSelIndex == liLength - 1) {  
  45.                                 currentSelIndex = 0;  
  46.                             }  
  47.                             else {  
  48.                                 currentSelIndex = currentSelIndex + 1;  
  49.                                 if (currentSelIndex > liLength - 1) {  
  50.                                     currentSelIndex = 0;  
  51.                                 }  
  52.                             }  
  53.                             if (currentSelIndex != -1) {  
  54.                                 document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";  
  55.                                 document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
  56.                             }  
  57.                             if (oldSelIndex != -1) {  
  58.                                 document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";  
  59.                             }  
  60.                         }  
  61.                     }  
  62.                 }  
  63.                 else if (event.keyCode == 13) {  
  64.                     if (document.getElementById("ulItems").style.display != "none" && liLength > 0 && currentSelIndex != -1) {  
  65.                         document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
  66.                         document.getElementById("ulItems").style.display = "none";  
  67.                         currentSelIndex = -1;  
  68.                         oldSelIndex = -1;  
  69.                     }  
  70.                 }  
  71.                 else {  
  72.                     autoComplete(keyword);  
  73.                     document.getElementById("ulItems").style.display = "";  
  74.                     currentSelIndex = -1;  
  75.                     oldSelIndex = -1;  
  76.                 }  
  77.             }              
  78.         }  
  79.  
  80.         function autoComplete(keyword) {  
  81.             var liHtml0 = "<li id=\"li_0\">1</li><li id=\"li_1\">12</li><li id=\"li_2\">123</li><li id=\"li_3\">1234</li>";  
  82.             var liHtml1 = "<li id=\"li_0\">12</li><li id=\"li_1\">123</li><li id=\"li_2\">1234</li>";  
  83.             var liHtml2 = "<li id=\"li_0\">123</li><li id=\"li_1\">1234</li>";  
  84.             var liHtml3 = "<li id=\"li_0\">1234</li>";  
  85.             if (keyword == "1234") {  
  86.                 document.getElementById("ulItems").innerHTML = liHtml3;  
  87.             }  
  88.             else if (keyword == "123") {  
  89.                 document.getElementById("ulItems").innerHTML = liHtml2;  
  90.             }  
  91.             else if (keyword == "12") {  
  92.                 document.getElementById("ulItems").innerHTML = liHtml1;  
  93.             }  
  94.             else if (keyword == "1") {  
  95.                 document.getElementById("ulItems").innerHTML = liHtml0;  
  96.             }  
  97.             else {  
  98.                 document.getElementById("ulItems").innerHTML = "";  
  99.             }  
  100.         }  
  101.     </script>  
  102. </head>  
  103. <body>  
  104.     <input id="txtKeyword" type="text" onkeyup="selectItem(this.value, event)" style="width:200px;" />  
  105.     <ul id="ulItems" style="display: none; border:1px solid #cecece; border-top:none; width:200px; padding:2px; margin:0px;">  
  106.     </ul>  
  107. </body>  
  108. </html> 



标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2