如何过滤掉jquery中不属于搜索结果的项目？

Question

我在下面有这个设置，如果我在第 2 天搜索第 1 天不包含的术语，那么第 1 天的标题仍将显示。如果特定标题下没有搜索结果，如何不显示该标题？

换句话说，搜索夜魔侠，它仅在第 2 天下，并且根本不应该显示第 1 天的标题。

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row py-2">
    <div class="col-sm-12">
      <input type="search" id="myInput" placeholder="Start typing.." name="search" class="form-control searchbox-input" required="">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="row no-gutters bg-info">
        <div class="col-sm-12 col-lg-4 p-3">
          <h2>Day 1</h2>
        </div>
        <div class="col-sm-12 col-lg-8 p-3">
          <h2>April 7, 2019</h2>
        </div>
      </div>      
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Batman</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card card-body">
      <h4 class="card-title">Superman</h4>
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="row no-gutters bg-warning">
        <div class="col-sm-12 col-lg-4 p-3">
          <h2>Day 2</h2>
        </div>
        <div class="col-sm-12 col-lg-8 p-3">
          <h2>April 8, 2019</h2>
        </div>
      </div>       
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Daredevil</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card card-body card-inverse card-primary text-xs-center">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer>
          <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-body text-xs-center">
      <h4 class="card-title">Hulk</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
    <div class="card card-body text-xs-right">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-body">
      <h4 class="card-title">Thor</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  </div>
</div>

Answer 1

无需在.filter内切换，甚至无需切换.. 您可以使用.show()和.hide()或.slideDown()和.slideUp()或.fadeIn()和.fadeOut().. 请参阅下面的示例并阅读代码中的注释

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".container .card").hide().closest('.row').hide(); // hide all cards and its closest rows
    $(".container .card").filter(function() {
      return $(this).text().toLowerCase().indexOf(value) > -1; // return true or false from filter
    }).show().closest('.row').show(); // then show the card and its closest row after filter
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row py-2">
    <div class="col-sm-12">
      <input type="search" id="myInput" placeholder="Start typing.." name="search" class="form-control searchbox-input" required="">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="row no-gutters bg-info">
        <div class="col-sm-12 col-lg-4 p-3">
          <h2>Day 1</h2>
        </div>
        <div class="col-sm-12 col-lg-8 p-3">
          <h2>April 7, 2019</h2>
        </div>
      </div>      
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Batman</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card card-body">
      <h4 class="card-title">Superman</h4>
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="row no-gutters bg-warning">
        <div class="col-sm-12 col-lg-4 p-3">
          <h2>Day 2</h2>
        </div>
        <div class="col-sm-12 col-lg-8 p-3">
          <h2>April 8, 2019</h2>
        </div>
      </div>       
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Daredevil</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card card-body card-inverse card-primary text-xs-center">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer>
          <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-body text-xs-center">
      <h4 class="card-title">Hulk</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
    <div class="card card-body text-xs-right">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-body">
      <h4 class="card-title">Thor</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  </div>
</div>