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

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

创新互联从2013年成立，先为铁山等服务建站，铁山等地企业，进行企业商务咨询服务。为铁山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.       
    6.   
  
  
  
  6.       
    7.   
  
  
  
  7.         ul,li{list-style-type:none;}  
    8.   
  
  
  
  8.       
    9.   
  
  
  
  9.       
    10.   
  
  
  
  10.         var currentSelIndex = -1;  
    11.   
  
  
  
  11.         var oldSelIndex = -1;  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.         function selectItem(keyword, event) {  
    14.   
  
  
  
  14.             if (keyword == "") {  
    15.   
  
  
  
  15.                 document.getElementById("ulItems").style.display = "none";  
    16.   
  
  
  
  16.                 return;  
    17.   
  
  
  
  17.             }  
    18.   
  
  
  
  18.             else {  
    19.   
  
  
  
  19.                 var liLength = document.getElementById("ulItems").getElementsByTagName("li").length; //获取列表数量  
    20.   
  
  
  
  20.                 if ((event.keyCode == 38 || event.keyCode == 40) && document.getElementById("ulItems").style.display != "none") {  
    21.   
  
  
  
  21.                     if (liLength > 0) {  
    22.   
  
  
  
  22.                         oldSelIndex = currentSelIndex;  
    23.   
  
  
  
  23.                         //上移  
    24.   
  
  
  
  24.                         if (event.keyCode == 38) {  
    25.   
  
  
  
  25.                             if (currentSelIndex == -1) {  
    26.   
  
  
  
  26.                                 currentSelIndex = liLength - 1;  
    27.   
  
  
  
  27.                             }  
    28.   
  
  
  
  28.                             else {  
    29.   
  
  
  
  29.                                 currentSelIndex = currentSelIndex - 1;  
    30.   
  
  
  
  30.                                 if (currentSelIndex < 0) {  
    31.   
  
  
  
  31.                                     currentSelIndex = liLength - 1;  
    32.   
  
  
  
  32.                                 }  
    33.   
  
  
  
  33.                             }  
    34.   
  
  
  
  34.                             if (currentSelIndex != -1) {  
    35.   
  
  
  
  35.                                 document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";  
    36.   
  
  
  
  36.                                 document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
    37.   
  
  
  
  37.                             }  
    38.   
  
  
  
  38.                             if (oldSelIndex != -1) {  
    39.   
  
  
  
  39.                                 document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";  
    40.   
  
  
  
  40.                             }  
    41.   
  
  
  
  41.                         }  
    42.   
  
  
  
  42.                         //下移  
    43.   
  
  
  
  43.                         if (event.keyCode == 40) {  
    44.   
  
  
  
  44.                             if (currentSelIndex == liLength - 1) {  
    45.   
  
  
  
  45.                                 currentSelIndex = 0;  
    46.   
  
  
  
  46.                             }  
    47.   
  
  
  
  47.                             else {  
    48.   
  
  
  
  48.                                 currentSelIndex = currentSelIndex + 1;  
    49.   
  
  
  
  49.                                 if (currentSelIndex > liLength - 1) {  
    50.   
  
  
  
  50.                                     currentSelIndex = 0;  
    51.   
  
  
  
  51.                                 }  
    52.   
  
  
  
  52.                             }  
    53.   
  
  
  
  53.                             if (currentSelIndex != -1) {  
    54.   
  
  
  
  54.                                 document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";  
    55.   
  
  
  
  55.                                 document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
    56.   
  
  
  
  56.                             }  
    57.   
  
  
  
  57.                             if (oldSelIndex != -1) {  
    58.   
  
  
  
  58.                                 document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";  
    59.   
  
  
  
  59.                             }  
    60.   
  
  
  
  60.                         }  
    61.   
  
  
  
  61.                     }  
    62.   
  
  
  
  62.                 }  
    63.   
  
  
  
  63.                 else if (event.keyCode == 13) {  
    64.   
  
  
  
  64.                     if (document.getElementById("ulItems").style.display != "none" && liLength > 0 && currentSelIndex != -1) {  
    65.   
  
  
  
  65.                         document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;  
    66.   
  
  
  
  66.                         document.getElementById("ulItems").style.display = "none";  
    67.   
  
  
  
  67.                         currentSelIndex = -1;  
    68.   
  
  
  
  68.                         oldSelIndex = -1;  
    69.   
  
  
  
  69.                     }  
    70.   
  
  
  
  70.                 }  
    71.   
  
  
  
  71.                 else {  
    72.   
  
  
  
  72.                     autoComplete(keyword);  
    73.   
  
  
  
  73.                     document.getElementById("ulItems").style.display = "";  
    74.   
  
  
  
  74.                     currentSelIndex = -1;  
    75.   
  
  
  
  75.                     oldSelIndex = -1;  
    76.   
  
  
  
  76.                 }  
    77.   
  
  
  
  77.             }              
    78.   
  
  
  
  78.         }  
    79.   
  
  
  
  79.  
    80.   
  
  
  
  80.         function autoComplete(keyword) {  
    81.   
  
  
  
  81.             var liHtml0 = "1
    82. 121231234";    
  
  
  
  82.             var liHtml1 = "12
    83. 1231234";    
  
  
  
  83.             var liHtml2 = "123
    84. 1234";    
  
  
  
  84.             var liHtml3 = "1234
    85. ";    
  
  
  
  85.             if (keyword == "1234") {  
    86.   
  
  
  
  86.                 document.getElementById("ulItems").innerHTML = liHtml3;  
    87.   
  
  
  
  87.             }  
    88.   
  
  
  
  88.             else if (keyword == "123") {  
    89.   
  
  
  
  89.                 document.getElementById("ulItems").innerHTML = liHtml2;  
    90.   
  
  
  
  90.             }  
    91.   
  
  
  
  91.             else if (keyword == "12") {  
    92.   
  
  
  
  92.                 document.getElementById("ulItems").innerHTML = liHtml1;  
    93.   
  
  
  
  93.             }  
    94.   
  
  
  
  94.             else if (keyword == "1") {  
    95.   
  
  
  
  95.                 document.getElementById("ulItems").innerHTML = liHtml0;  
    96.   
  
  
  
  96.             }  
    97.   
  
  
  
  97.             else {  
    98.   
  
  
  
  98.                 document.getElementById("ulItems").innerHTML = "";  
    99.   
  
  
  
  99.             }  
    100.   
  
  
  
  100.         }  
    101.   
  
  
  
  101.       
    102.   
  
  
  
  102.   
    103.   
  
  
  
  103.   
    104.   
  
  
  
  104.       
    105.   
  
  
  
  105.       
    106.   
  
  
  
  106.       
    107.   
  
  
  
  107.   
    108.   
  
  
  
  108.  
    109.

【编辑推荐】

  1. 快速判断JavaScript对象是否存在的十个方法
  2. JavaScript重构深入剖析
  3. 在JavaScript中监听IME键盘输入事件
  4. 19个很有用的JavaScript库强烈推荐
  5. 4月超棒的JavaScript游戏开发框架推荐

名称栏目：JavaScript实现搜索框智能提示上下移动效果
标题URL：http://www.hantingmc.com/qtweb/news20/532670.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设知识

分类信息网

重庆建站　　 　青羊总部基地　　 　绵阳网站制作公司　　 　成都外贸网站建设　　 　达州网站建设　　 　重庆网站建设　　 　眉山电信机房托管　　 　绵阳科技城电信IDC机房　　 　重庆电商网站定制　　 　成都服务器托管　　 　app开发公司　　 　成都企业网站建设　　 　广告吸塑字　　 　微信小程序　　 　商城系统开发　　 　成都做网站　　 　简阳电信机房　　 　成都全屋定制　　 　江油做网站　　 　网站收录