使用 jquery 搜索多个列表并显示搜索项

Question

<!-- display only the sentences in a list whose starting letter matches the letter selected from the drop down list -->

$("document").ready(function() {
    $("#alphalist").change(function(){ 
       $(".lists").hide();
       $("#" + $(this).val()).show();
    });
 });
 
 <!-- code to search from currently displayed list -->
 
 function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = $("#searchbox");
    filter = input.value.toUpperCase();
    ul = $("ul");
    li = ul.$("li");
    for (i = 0; i < li.length; i++) {
       a = li[i].$("a")[0];
       txtValue = a.textContent || a.innerText;
       if (txtValue.toUpperCase().indexOf(filter) > -1) {
           li[i].style.display = "";
       } 
       else {
           li[i].style.display = "none";
       }
    }
 }

<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
   <body>
    <select class="dropdown" id="alphalist">   
       <option value="a" selected>A</option>   
       <option value="b">B</option>
    </select> 
    <input class="input" type="text" id="searchbox" placeholder="Search...." onkeyup="myFunction()"/>  
    <div class="lists" id="a">
       <ul id="alist">
           <li><a href="#">All is well</a></li>
           <li><a href="#">Any body can dance</a></li>
           <li><a href="#">As you like it</a></li>
       </ul>  
    </div>  
    <div class="lists" id="b" style="display:none">
       <ul id="blist">
           <li><a href="#">Before the sunset</a></li>
           <li><a href="#">Blink your eyes</a></li>
           <li><a href="#">Bukkle up</a></li>
        </ul>  
    </div>          
 </body>
</html>

这只是一个小例子。在这里，我使用 select 标记和两个 ul 列表创建了两个选项（A 和 B）。第一个列表包含以字母 'a' 开头的句子，第二个列表包含以字母 'b' 开头的句子。第一个 jquery 代码显示的句子列表的首字母与下拉选项中 selected 的字母相匹配。

但问题在于搜索。考虑 selecting 选项 B，它会列出以 B 开头的句子。之后，如果我在搜索栏中写了一些东西，我想显示当前显示列表中的匹配句子（以 b 开头的句子）。我试过了，但没有得到我想要的结果。请帮助我。

Answer 1

我已经更新了您的搜索代码。

   $("#searchbox").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("div.lists li").filter(function() {
         $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
   });

使用 jquery 搜索多个列表并显示搜索项

Search multiple lists and dispaly search items using jquery

html

search

jquery

list

drop-down-menu