使用 jquery 根据所选选项搜索列表

Question

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

$("document").ready(function() {
    $("#alphalist").change(function(){ 
       $(".lists").hide();
       $("#" + $(this).val()).show();
    });
 });
 
 <!-- Searching list-->
 
 $("#searchbox").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("div.lists li").filter(function() {
         $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
   })
   
 <!-- Removing text value from search bar on clicking another option -->
   
    $(".dropdown").change(function() {
     $('.input').val("");
   });

<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" name="query" placeholder="Search...."/>  
    <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>

这里我创建了 2 个选项，A 和 B。然后创建了两个 ul 列表。第一个 jquery 代码仅显示第一个字母与 selected 选项文本匹配的列表项。即，如果我们单击选项 B，它仅显示以字母 B 开头的列表项。然后执行搜索 selects 匹配的列表项。

所以真正的问题出现在更改选项的过程中。例如，如果我们 select 选项 B，并开始输入一些字母（以便它会显示可用的结果）并且出于某种原因，如果我们尝试选择选项 A，则以字母 A 开头的项目列表将不会显示。

   $(".dropdown").change(function() {
     $('.input').val("");
   });

此代码从输入框中删除当前写入的文本。但是我们必须在输入框中手动输入退格键才能显示 A 列表。如何克服这个问题？

Answer 1

您的问题出在这个事件处理程序中：

$(".dropdown").change(function() {
    $('.input').val("");
});

But we have to manually enter a backspace in input box to display the A lists. How to overcome this?

清空输入字段后，您需要 trigger keyup 事件：

$("#searchbox").trigger('keyup');

片段：

$("#alphalist").on('change', function(e){
    $(".lists").hide();
    $("#" + $(this).val()).show();
});
$("#searchbox").on("keyup", function(e) {
    var value = $(this).val().toLowerCase();
    $("div.lists li").each(function() {
        var x = $(this).text().toLowerCase().indexOf(value) > -1;
        $(this).toggle(x)
    });
});
$(".dropdown").change(function() {
    $('.input').val("");
    $("#searchbox").trigger('keyup');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="dropdown" id="alphalist">
    <option value="a" selected>A</option>
    <option value="b">B</option>
</select>
<input class="input" type="text" id="searchbox" name="query" placeholder="Search...."/>
<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>

使用 jquery 根据所选选项搜索列表

searching lists based on selected option using jquery

html

javascript

jquery

html-lists

drop-down-menu