Question

我需要帮助如何管理面板的多个过滤器。我想搜索多个字段，但要保留过滤器。示例：我怀疑面板仍然显示面板标题有文本面板的所有面板，但是如果我写第二个输入测试应该只显示在体内测试的面板吗？

    $("#srcPanelHeading").keyup(function () {
        var panels = $('.panel-info');
        var val = this.value.toLowerCase();
        panels.show().filter(function () {
            var panelHeadingText = $(this).find('.panel-heading').text().toLowerCase();
            return panelHeadingText.indexOf(val) < 0;
        }).hide();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" />
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/>
<div class="panel panel-info">
  <div class="panel-heading">Panel 1</div>
  <div class="panel-body">
  Test
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 2</div>
  <div class="panel-body">
  Something to read
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Test 3</div>
  <div class="panel-body">
  Test
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 4</div>
  <div class="panel-body">
  Test
  </div>
</div>

Answer 1

过滤器可以组合在一个处理程序中。下面使用辅助函数为每个输入创建一个过滤器，并逐个应用：

$("#srcPanelHeading, #srcPanelBody").keyup(function () {
        var getFilter = function(el, selector){
          var txt = $(el).val().toLowerCase();
          return txt
            ? function(i,p){ return $(p).find(selector).text().toLowerCase().indexOf(txt) !== -1;}
            : function(i,p){return true;};
        };              
          
        $('.panel-info').hide()
          .filter(getFilter('#srcPanelHeading', '.panel-heading'))
          .filter(getFilter('#srcPanelBody', '.panel-body'))
          .show();        
    });

.panel{
  border:1px solid gray;
}

.panel-heading{
  font-style:italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" />
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/>
<div class="panel panel-info">
  <div class="panel-heading">Panel 1</div>
  <div class="panel-body">
  Test
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 2</div>
  <div class="panel-body">
  Something to read
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Test 3</div>
  <div class="panel-body">
  Test
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 4</div>
  <div class="panel-body">
  Test
  </div>
</div>

Answer 2

在打字＆＃39;测试＆＃39;在第二个输入中，您将获得panel1,3,5作为＆＃39; test＆＃39;在其中输入文字以及输入＆＃39;某些内容＆＃39;，您将获得panel2,5。

这是你问的吗？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" />
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/>
<div class="panel panel-info">
  <div class="panel-heading">Panel 1</div>
  <div class="panel-body">
  Test1
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 2</div>
  <div class="panel-body">
  Something to read
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel 3</div>
  <div class="panel-body">
  Test3
  </div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">Panel 4</div>
  <div class="panel-body">
 Something to read
  </div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">Panel 5</div>
  <div class="panel-body">
  Test5
  </div>
</div>
<script>
 $("#srcPanelHeading").keyup(function () {
        var panels = $('.panel-info');
        var val = this.value.toLowerCase();
        panels.show().filter(function () {
            var panelHeadingText = $(this).find('.panel-heading').text().toLowerCase();
            return panelHeadingText.indexOf(val) < 0;
        }).hide();
    });
     $("#srcPanelBody").keyup(function () {
        var panels = $('.panel-info');
        var val = this.value.toLowerCase();
        panels.show().filter(function () {
            var panelHeadingText = $(this).find('.panel-body').text().toLowerCase();
            return panelHeadingText.indexOf(val) < 0;
        }).hide();
    });

</script>

＆＃13;

用于div的jQuery Multiple Filter

2 个答案: