使用jQuery自动过滤掉不匹配的结果

Question

我想创建一个filterearch，过滤掉不包含与用户输入匹配的h3的div。

到目前为止我的HTML代码：

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-info">
          <div class="panel-heading">
            <span class="panel-title text-info">
              <i class="fa fa-search"></i> Filter projects
            </span>
          </div>
          <div class="panel-body">
                <div class="col-md-12">
                    <input id="sok" class="form-control" placeholder="Filtrer on projects" type="text">
                </div>  
          </div>
        </div>
        <br>
    </div>
    <script>
        $('#sok').keyup(function () {
            var txt = $('#sok').val();
           if ($('.filter >  h3:contains('+txt+')',this).length  === 0) {
                    $(this).css("display","none");
            }
        });         
    </script>
</div>

这包含一个包含需要搜索的h3的div，如果searchinput与h3的内容不匹配，则a-tag应设置为display-none。

<a href="/project-details/345" class="project">
    <div class="col-md-2 filter">
        <div class="panel panel-info panel-border top">
            <div class="panel-body project-box">
                <h3>Text title to be matches</h3>
                <p>content here</p>
            </div>
            <div class="panel-footer">
                <p>15-12-45</p>
            </div>
        </div>
    </div>
</a>

我不知道如何做到这一点的最佳做法，但任何指针都将受到赞赏。

Answer 1

你的选择器错了。使用closest()选择.filter的父级，并使用jQuery的filter()函数。

  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) == -1;
  }).closest('.filter').hide();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) != -1;
  }).closest('.filter').show();

上面的代码将隐藏没有文本的元素，并显示带文本的元素。

请参阅下面的演示。

$('#sok').keyup(function() {
  var txt = $('#sok').val().toLowerCase();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) == -1;
  }).closest('.filter').hide();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) != -1;
  }).closest('.filter').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        <span class="panel-title text-info">
                  <i class="fa fa-search"></i> Filter projects
                </span>
      </div>
      <div class="panel-body">
        <div class="col-md-12">
          <input id="sok" class="form-control" placeholder="Filtrer on projects" type="text">
        </div>
      </div>
    </div>
    <br>
  </div>
</div>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>It</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>xx</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>yy</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>Text title to be matches</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>yy</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>