Filter Div With Jquery

I'm looking to filter some div with an input field : I want to show all divs at the beginning and when user types into the input field, filter by the

Solution 1:

• Assuming you need to filter with startsWith.
• Use a class hide to hide the elements.
• Loop over each .body elements.
• Find the elements using this selector [class="name"].
• Compare the text using startsWith function.

Look at this code snippet.

//<p class="name">John Doe</p>

$('#myInput').on('input', function() {
  var enteredValue = $(this).val();

  $('.body').each(function() {
    var $parent = $(this);
    $(this).find('[class="name"]').each(function() {
      if ($(this).text().startsWith(enteredValue)) {
        $parent.removeClass('hide');
      } else {
        $parent.addClass('hide');
      }
    })
  });
});

.hide {
  display: none
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"class="filter"id="myInput"placeholder="Recherche rapide..."><divclass="col-lg-6 col-md-6 col-sm-12"style="visibility: visible; display: block;"><divclass="card all-patients"id=""><divclass="body"><divclass="row"id=""><divclass="col-md-4 col-sm-4 text-center m-b-0"></div><divclass="col-md-8 col-sm-8 m-b-0"><pclass="name">John Doe</p><p> 12 ans</p><p> 04 94 94 94 94</p><buttontype="button"class="btn waves-effect waves-cyan">Fiche du patient</button></div></div></div></div></div><divclass="col-lg-6 col-md-6 col-sm-12"id=""style="visibility: visible; display: block;"><divclass="card all-patients"id=""><divclass="body"><divclass="row"id=""><divclass="col-md-4 col-sm-4 text-center m-b-0"></div><divclass="col-md-8 col-sm-8 m-b-0"><pclass="name">Samuel pelo</p><p> 12 ans</p><p> 04 94 94 94 94</p><buttontype="button"class="btn waves-effect waves-cyan">Fiche du patient</button></div></div></div></div></div>

See? the elements are being filtered.

Solution 2:

This solution filter divs with names that contains value from input. Filtering is case-insensitive. Also, there is no setting any class, but if you need you can add this. Just change $card.show() to $card.addClass('visible') and change $card.hide() to $card.removeClass('visible').

$(document).ready(function() {
  $('.filter').on('input', function() {
    var $this = $(this);
    var $cards = $('.card');

    $filteredCards = $cards.each(function(i, card) {
      var $card = $(card);
      var name = $card.find('.name').first();
      name = name.text().toLowerCase();

      if(name.indexOf($this.val().toLowerCase()) !== -1) {
        $card.show();
      } else {
        $card.hide();
      }
    });
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"class="filter"id="myInput"placeholder="Recherche rapide..."><divclass="col-lg-6 col-md-6 col-sm-12"id=""style="visibility: visible; display: block;"><divclass="card all-patients"id=""><divclass="body"><divclass="row"id=""><divclass="col-md-4 col-sm-4 text-center m-b-0"></div><divclass="col-md-8 col-sm-8 m-b-0"><pclass="name">John Doe</p><p> 12 ans</p><p> 04 94 94 94 94</p><buttontype="button"class="btn waves-effect waves-cyan">Fiche du patient</button></div></div></div></div></div><divclass="col-lg-6 col-md-6 col-sm-12"id=""style="visibility: visible; display: block;"><divclass="card all-patients"id=""><divclass="body"><divclass="row"id=""><divclass="col-md-4 col-sm-4 text-center m-b-0"></div><divclass="col-md-8 col-sm-8 m-b-0"><pclass="name">Samuel pelo</p><p> 12 ans</p><p> 04 94 94 94 94</p><buttontype="button"class="btn waves-effect waves-cyan">Fiche du patient</button></div></div></div></div></div>

Share