代码之家  ›  专栏  ›  技术社区  ›  Millhorn

如何过滤jquery中不属于搜索结果的项?

  •  0
  • Millhorn  · 技术社区  · 6 年前

    不是 显示标题?

    换句话说,search 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>
    1 回复  |  直到 6 年前
        1
  •  0
  •   Mohamed-Yousef    6 年前

    不需要在 .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>