广元网站建设

专注高端品牌网站建设行业优质供应商！认准优众联杰建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    广元优众联杰建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 优众联杰建站
  • 联系我们

    • 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实现搜索框智能提示上下移动效果
    标题路径：http://www.zjjierui.cn/article/cosgjog.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：成都市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    广元优众联杰建站公司是一家专注从事于高品质视觉体验及互联网设计开发，广元网站建设，广元网站设计，广元网页设计，广元网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，优众联杰建站位于广元市龙岗区大运软件小镇，优众联杰建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    成都主机托管   成都数字化转型   重庆水土三线托管   成都网站制作公司   网站推广   成都工商注册   眉山网站建设   网站收录   成都小程序定制开发公司   成都发电机组厂家   

    Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 All Rights Reserved   蜀ICP备2024116266号-5

    Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 

    蜀ICP备2024116266号-5