Auto filter out non-matching results using jQuery

debugcn Published at Dev

sdfgg45

I want to make a filtersearch that filter out the divs not containing a h3 that matches the users input.

My html code so far:

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-info">
          <div class="panel-heading">
            <span class="panel-title text-info">
              <i class="fa fa-search"></i> Filter projects
            </span>
          </div>
          <div class="panel-body">
                <div class="col-md-12">
                    <input id="sok" class="form-control" placeholder="Filtrer on projects" type="text">
                </div>  
          </div>
        </div>
        <br>
    </div>
    <script>
        $('#sok').keyup(function () {
            var txt = $('#sok').val();
           if ($('.filter >  h3:contains('+txt+')',this).length  === 0) {
                    $(this).css("display","none");
            }
        });         
    </script>
</div>

This a contains one div holding a h3 that needs to be searchable,and if the searchinput dont match the contents of h3, the a-tag should be set to display-none.

<a href="/project-details/345" class="project">
    <div class="col-md-2 filter">
        <div class="panel panel-info panel-border top">
            <div class="panel-body project-box">
                <h3>Text title to be matches</h3>
                <p>content here</p>
            </div>
            <div class="panel-footer">
                <p>15-12-45</p>
            </div>
        </div>
    </div>
</a>

I don't know the best practice on how to do this, but any pointers will be appreciated.

rrk

Your selector is wrong. Select parent with .filter using closest() and made use of filter() function of jQuery.

  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) == -1;
  }).closest('.filter').hide();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) != -1;
  }).closest('.filter').show();

The above code will hide the elements which does not have the text and show ones with text.

See the demo below.

$('#sok').keyup(function() {
  var txt = $('#sok').val().toLowerCase();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) == -1;
  }).closest('.filter').hide();
  $('.filter h3').filter(function(){
      return this.innerHTML.toLowerCase().indexOf(txt) != -1;
  }).closest('.filter').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        <span class="panel-title text-info">
                  <i class="fa fa-search"></i> Filter projects
                </span>
      </div>
      <div class="panel-body">
        <div class="col-md-12">
          <input id="sok" class="form-control" placeholder="Filtrer on projects" type="text">
        </div>
      </div>
    </div>
    <br>
  </div>
</div>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>It</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>xx</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>yy</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>Text title to be matches</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>
<a href="/project-details/345" class="project">
  <div class="col-md-2 filter">
    <div class="panel panel-info panel-border top">
      <div class="panel-body project-box">
        <h3>yy</h3>
        <p>content here</p>
      </div>
      <div class="panel-footer">
        <p>15-12-45</p>
      </div>
    </div>
  </div>
</a>

Collected from the Internet

Please contact [email protected] to delete if infringement.