jQuery Mehrfachfilter für divs

Question

Ich brauche Hilfe, wie mehrere Filter für Panels zu verwalten. Ich möchte mehr als ein Feld suchen, aber Filter behalten. Beispiel: Ich Wright Panel immer noch alle Panels angezeigt, wo Panel-Überschrift hat Text-Panel, aber in der zweiten Eingabe, wenn ich schreibe Test sollte nur Panels angezeigt werden, die in Body Test hat?

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

Der Filter kann in einem einzigen Behandlungsroutine kombiniert werden. Die unten verwendet eine Hilfsfunktion, die einen Filter für jeden Eingang erzeugt und wendet jede Reihe nach:

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

auf 'Test' in dem zweiten Eingang eingeben, werden Sie panel1,3,5, die als 'Test' Text in ihm und auf die Eingabe einer 'etwas' bekommen, erhalten Sie, Panel2,5.

Haben Sie das gefragt?

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