用于 div 容器的 JQuery 搜索功能

Question

我正在尝试使用 JQuery 和这个脚本（过滤我的 mySql 输出）：

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

我要过滤的 mySql 条目在 html 中如下所示：

<div class="card" id="notes">
    <div class="card-header">
        <div class="float-left">
            <h5 class="card-title float-left">Title ABC</h5>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">Text XYZ</p>
    </div>
    <div class="card-footer">
        <div class="float-left">
            <p class="card-date">Date 2020-03-13</p>
        </div>
    </div>
</div>

所以每个<div class="card" id="notes"> 是一个条目。

问题是（如您所见）我可能错误地使用了此功能，因为我过滤了$("#notes div").filter(function() {

所以如果我搜索“ABC”，脚本只会显示包含“Title ABC”的 div 容器。如果我搜索“XYZ”等也是如此。

所以我想要的是。无论我搜索什么，都应该显示整个 div 容器 <div class="card" id="notes"> ，在其中可以在标题、文本或日期中找到搜索条目。

有人会这么好心地解释我如何使它工作吗？我很感谢每一个提示，甚至是我可以使用的好教程的链接。

在此先感谢您的问候。

Answer 1

#notes 仅针对 1 个.card。 "#notes div" 然后在其中过滤divs。如果你想通过他们的文本内容过滤.card，你应该通过搜索他们的父母找到所有.cards：

const value = "xyz";
$(".cards .card").filter(function(i, el) {
  const $card = $(el);
  $card.toggle($card.text().toLowerCase().indexOf(value) > -1)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <div class="card" id="notes">
    <div class="card-header">
      <div class="float-left">
        <h5 class="card-title float-left">Title ABC</h5>
      </div>
    </div>
    <div class="card-body">
      <p class="card-text">Text XYZ</p>
    </div>
    <div class="card-footer">
      <div class="float-left">
        <p class="card-date">Date 2020-03-13</p>
      </div>
    </div>
  </div>
  <div class="card" id="songs">
    <div class="card-header">
      <div class="float-left">
        <h5 class="card-title float-left">Title Hmm</h5>
      </div>
    </div>
    <div class="card-body">
      <p class="card-text">Text xYz</p>
    </div>
    <div class="card-footer">
      <div class="float-left">
        <p class="card-date">Date 2020-03-13</p>
      </div>
    </div>
  </div>
</div>