jquery - 如何仅通过在 jQuery 中按下键盘来搜索无序列表？

Question

我有一个由 ul li 制作的国家/地区列表，该列表位于表格的一列下方。我需要在键盘上按键时搜索国家/地区。

<ul class="country-search">
   <li id="1">Country 1</li>
   <li id="2">Country 2</li>
   <li id="3">Country 3</li>
   <li id="4">Country 4</li>
</ul> 

示例在这里

需要在按键上搜索元素而不是在任何输入框上打字..有什么帮助吗？

Answer 1

听起来您正在寻找的功能内置于 <SELECT> 中HTML 中的对象，假设您可以使用 <select>那是。

您可以设置 size属性为 20它看起来就像您拥有的列表。这是一个例子。

例如

<select class="country-search" size="20">
   <option id="1" value="Country 1">Country 1</option >
   <option id="2" value="Country 2">Country 2</option >
   <option id="3" value="Country 3">Country 3</option >
   <option id="4" value="Country 4">Country 4</option >
   <!-- ... -->
   <option id="20" value="Country 20">Country 20</option >
   <!-- ect. -->
</select> 

这也非常有用，因为您可以将它用作表单的输入。

更新:

如果我对 OP 的理解正确，他想要这样的东西，

$(":not(input)").keypress(function(event ){

       /*Search the country for the letter typed*/
       var NotFound = true;
       if($("ul.country-search li").each(function() {

             /* If you haven't found a country starting with the key pressed check if this one starts with the same key*/             
             if(NotFound && $( this ).text().indexOf(event.which) == 0)
             {
                 NotFound = false; //Stop looking a country starts with this key
                 $(this).focus();  //Give this item focus
                 $("ul.country-search li").removeClass('highlightingClass'); //remove previous highlight
                 $(this).addclass('highlightingClass'); //Add highlight to current li

                /*do something else*/
              }
           });
   });