使用 jquery .filter() 在列表中搜索项目

Question

我正在尝试输入一个可以查看我的列表并返回以下结果的输入。

这是我的清单

<ul id="lista1" class="list-group"> 
    <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id = "elem1"> Carne </p>
        <p id = "elem2"> Pesce </p>
        <p id = "elem3"> Verdure </p>
    </li>
</ul>

在网上搜索，我发现了这个功能，但我不能在我的情况下采用它，因为我不想更改当前列表，但下面只复制搜索结果。

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#lista1 p").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).indexOf()
    });
  });
});

Answer 1

您需要使用.filter()选择不包含值的每个元素，然后隐藏它们。

 $("#myInput").on("keyup", function() { var value = this.value.toLowerCase().trim(); $("#lista1 p").show().filter(function() { return $(this).text().toLowerCase().trim().indexOf(value) == -1; }).hide(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="myInput"> <ul id="lista1" class="list-group"> <li id = "1" class="list-group-item d-flex justify-content-between align-items-center"> <p id = "elem1"> Carne </p> <p id = "elem2"> Pesce </p> <p id = "elem3"> Verdure </p> </li> </ul>

Answer 2

这个解决方案会有所帮助

var types = ['type1','type2'];

var list = [{'tite':'type11','type':'type1'},{'tite':'type12','type':'type1'},{'title':'type21','type':'type2'},{'title':'etc','type':'alaki'}];

list.filter(c=> types.includes(c.type));

[{"tite":"type11","type":"type1"},{"tite":"type12","type":"type1"},{"title":"type21","type":"type2"}]

Answer 3

请尝试使用以下代码片段：小提琴链接：

HTML部分：

      <input class="form-control" id="txtSearch" type="text">

        <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
  <p class="list-group-item" > Carne </p>
  <p class="list-group-item" > Pesce </p>
  <p  class="list-group-item" > Verdure </p>

</li>

jQuery 部分：

$("#txtSearch").on('keyup', function() {
    var search = $(this).val().toLowerCase();
    //Go through each list item and hide if not match search

    $(".list-group-item").each(function() {
        if ($(this).html().toLowerCase().indexOf(search) != -1) {
            $(this).show();
        }
        else {
            $(this).hide();  
        }

    });
    $(".list-group-item:visible").each(function(index) {
         if(index == 0){
             $(this).css("border-top-left-radius", "10px");
             $(this).css("border-top-right-radius", "10px");
         }
         if(index == $(".list-group-item:visible").length - 1){
             $(this).css("border-bottom-left-radius", "10px");
             $(this).css("border-bottom-right-radius", "10px");
         }
     });

});

Answer 4

在下面的代码中，我没有使用filter或for each 。 请看一下（您可以在线查看或更改）。 这个技巧在很多情况下都很有用：

<input type="text" id="myInput"/>
<ul id="lista1" class="list-group"> 
    <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
        <p id = "elem1"> Carne </p>
        <p id = "elem2"> Pesce </p>
        <p id = "elem3"> Verdure </p>
    </li>
</ul>

它的js：

$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#lista1 p").css("display", function() {
            return this.innerText.toLowerCase().indexOf(value) > -1 ? "":"none"
        });
    });
});

打扰一下！ 我正在用手机打字，但无法访问stackoverflow编辑器的代码工具。 你可以从上面的小提琴测试它。

Answer 5

假设我们有以下内容：

<input type="text" id="txtinput"/>
<ul id="lista1" class="list-group"> 
   <li id = "1" class="list-group-item d-flex justify-content-between align-items-center">
       <p id = "elem1"> Carne </p>
       <p id = "elem2"> Pesce </p>
       <p id = "elem3"> Verdure </p>
   </li>
</ul>

过滤器api脚本

$(document).ready(function(){
   $("#txtinput").on("keyup", function() {
     searchAPI(this,'#lista1');
   });
});

function searchAPI(target, list) {
    var value = $(target).val().toLowerCase();
    $(list + " > li > p").each(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
}

使用 searchAPI 可以在不同的列表中进行搜索。