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

此解决方案会有所帮助

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 2

您需要使用.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 3

请尝试使用以下代码段：拨弄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");
         }
     });

});

Answer 4

在下面的代码中，我没有使用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编辑器的代码工具。您可以从小提琴上方对其进行测试。

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

使用jquery .filter（）在列表中搜索项目

5 个答案: