jQuery div用の複数のフィルタ

Question

パネルの複数のフィルタを管理する方法が必要です。 複数のフィールドを検索したいのですが、フィルタを保持したいのですが。 例：Wright Panelパネルの見出しにテキストパネルがあるすべてのパネルが表示されますが、Testを記述すると2番目の入力にBodyテストのパネルのみが表示されますか？

$("#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

第二の入力に「test」と入力するには、あなたはそれでと「何か」を押す上の「試験」テキストとして、あなたが買ってあげるpanel1,3,5を取得しますパネル2,5。

これはあなたの質問ですか？

<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>