Filter Div With JQuery

Question

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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">

<div class="col-lg-6 col-md-6 col-sm-12" style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
          <p class="name">John Doe</p>
          <p> 12 ans</p>
          <p> 04 94 94 94 94</p>
          <button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
  <div class="card all-patients" id="">
    <div class="body">
      <div class="row" id="">
        <div class="col-md-4 col-sm-4 text-center m-b-0">
        </div>
        <div class="col-md-8 col-sm-8 m-b-0">
          <p class="name">Samuel pelo</p>
          <p> 12 ans</p>
          <p> 04 94 94 94 94</p>
          <button type="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').

Baca Juga

$(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();
      }
    });
  });
});

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

JavaScript Sample

Filter Div With JQuery

Solution 1:

Look at this code snippet.

Solution 2:

Post a Comment for "Filter Div With JQuery"