CODEWITHSUNDEEP
jquery
Danijel Boksan
Danijel Boksan

Reputation: 789

jQuery Multiple Filter for divs

I need help how to manage multiple filter for panels. I want to search on more than one field, but to keep filters. Example: I wright Panel still be shown all panels where panel-heading has text panel, but in second input if I write Test should be shown only panels which has in body Test ?

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

Upvotes: 0

Views: 82

Answers (2)

Me.Name
Me.Name

Reputation: 12544

The filter can be combined in a single handler. The below uses a helper function which creates a filter for each input and applies each after the other:

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

Upvotes: 1

Hema Nandagopal
Hema Nandagopal

Reputation: 678

On typing 'test' in the second input, you will get panel1,3,5 which as 'test' text in it and on typing 'something', you'll get panel2,5.

Is this what you asked?

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

Upvotes: 0

Related Questions