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

【问题标题】：Search for an item in a list using jquery .filter()使用 jquery .filter() 在列表中搜索项目
【发布时间】：2019-03-06 15:01:30
【问题描述】：

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

这是我的清单

<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()
    });
  });
});

【问题讨论】：

请输入代码sn-p。

标签： javascript jquery html list

【解决方案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>

【讨论】：

如果我想完全隐藏该行？我必须用 $ ("# list1 li") 替换 $ ("# list1 p") 吗？因为我的列表是这样形成的'代码'
Carne

@Benix89 是的，$("# list1 li") select li contains ps

我试过了 $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = this.value .toLowerCase().trim(); $("#lista1 li").show().filter(function() { return $(this).text().toLowerCase().trim().indexOf(value) == -1; }).hide(); }); });

不，结果不符合我的要求。我只希望出现参考

。 $("#lista1 *") ibb.co/fQSCRz

出错

让我们continue this discussion in chat.

【解决方案2】：

请尝试以下代码 sn-ps: fiddle Link:

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");
         }
     });

});

【讨论】：

【解决方案3】：

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

<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 编辑器的代码工具。你可以从上面的小提琴测试它。

【讨论】：

不，结果不符合我的要求。我只希望出现参考
。 $("#lista1 *") ibb.co/fQSCRz

我的整个代码中都没有$("#lista1 *")，但是如果我理解您在评论中描述的要求，请查看this fiddle 中的更新方法并告诉我（如果这就是你想要的）更新当前答案:)

显示此jsfiddle.net/cq7o8h6g/3 添加更多项目并进行搜索并检查搜索结果

【解决方案4】：

这个解决方案会很有帮助

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"}]

【讨论】：

【解决方案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 可以在不同的列表中进行搜索。

【讨论】：