时间戳

首页 > 解决方案 > 使用 jquery .filter() 在列表中搜索项目

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

问题描述

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

这是我的清单

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

标签： javascriptjqueryhtmllist

解决方案

您需要选择每个不包含值的元素，.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>

推荐阅读