Question

我在下面进行了此设置，如果我在第2天下搜索了第1天未包含的字词，则第1天标题仍会显示。如果特定标题下没有搜索结果，该如何不显示该标题？

换句话说，搜索Daredevil，它仅在第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() OR .slideDown()和{ {1}} OR .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
  });
});

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

1 个答案: