CODEWITHSUNDEEP
jquery
None
None

Reputation: 5670

search on specific element in HTML with jquery

My HTML is like this

    <div class="innerbox">
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/ledelse/">Ledelse</a>
        </h5>

      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/administration/">Administration</a>
        </h5>
      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="simple-list02">
    <ul>
      <li class="first-child last-child odd-item">
        <h5 class="text-style02">
          <a href="/kontakt/find-medarbejder/omstillingbogholderi/">Omstilling/bogholderi</a>
        </h5>

      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
</div>

and I got an HTML input box like this

<input type="text" name="textbox" id="txtesearch" class="text" placeholder="Søg efter medarbejder">

Now what I want is When some one enters "Ledelse" in this textbox I want to hide all div which got a class "simple-list02" excluding first one as it contains an h5 with text "Ledelse" in it. I had tried hard coding all the h5 text,But I don't believe its an ideal solution and as this is jquery there must be a smarter way to achieve this .can any one give me a hand

Upvotes: 0

Views: 106

Answers (1)

David Hedlund
David Hedlund

Reputation: 129782

$('.simple-list02:not(:has(h5:contains(' + searchTerm + ')))').hide();

The code above only hides, though. You may want to show all elements first, and then hide the ones that don't match, if the text changes.

 $('.simple-list02')
    .show()
    .not(':has(h5:contains(' + searchTerm + '))').hide();

Demo

Note that :contains is case sensitive. If you want something more advanced you may pass the set of simple-lists through a .filter function:

$('.simple-list02')
    .show()
    .filter(function() { 
        return $(this).find('h5').text().toLowerCase()
                  .indexOf( searchTerm.toLowerCase() ) == -1;
    })
    .hide();

Additionally, you could roll your own :contains selector, as explained in this blog post:

// pre 1.8
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// since 1.8
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Upvotes: 4

Related Questions