自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript實現(xiàn)搜索框智能提示上下移動效果

作者：楊銳
開發(fā) 前端
最近公司網站首頁搜索框改進，需要在智能提示列表上加上支持鍵盤上下鍵移動的效果。搞了一晚上，下面呈上純javascript代碼，沒有用到jquery等其他類

最近公司網站首頁搜索框改進，需要在智能提示列表上加上支持鍵盤上下鍵移動的效果。

搞了一晚上，下面呈上純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; //獲取列表數(shù)量  
  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> 

【編輯推薦】

  1. 快速判斷JavaScript對象是否存在的十個方法
  2. JavaScript重構深入剖析
  3. 在JavaScript中監(jiān)聽IME鍵盤輸入事件
  4. 19個很有用的JavaScript庫強烈推薦
  5. 4月超棒的JavaScript游戲開發(fā)框架推薦
責任編輯：陳貽新 來源： 天柱山的博客
JavaScript
相關推薦

2023-05-15 07:33:19

智能搜索pgvectorGPT-3

2010-08-20 17:09:22

微軟Windows PhoWindows Mob

2009-10-14 10:19:57

VB.NET Doma

2022-09-20 14:35:59

ArkUI鴻蒙JS

2017-11-14 14:24:46

移動端DNS無線網絡

2013-04-03 14:03:46

移動搜索視覺搜索

2010-06-02 15:56:54

IPv6協(xié)議標準

2019-09-09 06:50:14

mv命令移動文件Linux

2012-12-04 10:35:07

2022-09-14 13:13:51

JavaScript上下文

2009-07-27 10:35:24

高亮Javascrip

2020-06-10 08:23:44

JavaScript開發(fā)Web

2011-09-01 13:17:46

JQuery滾動

2017-03-20 11:00:48

語音識別搜索框人工智能

2011-04-19 17:24:09

JavaScript二級聯(lián)動下拉框

2011-12-13 16:30:59

Strix無線Mesh網狀網

2012-08-01 09:52:35

移動搜索

2013-01-07 11:18:20

2015-10-14 17:56:54

神馬搜索藍光模式

2015-10-29 11:13:23

iOS9使用框
點贊
收藏

51CTO技術棧公眾號