Today I am going to tell you how to search a text with in a DOM element using jQuery. There are so many plugins are available in the internet but here I didn’t used any plugins.

I hope this tutorial will add some nice user experience in your web projects.

Live text search using jquery script can be integrated easily on any page where you are listing products, list of members, news, blog posts & any ordered or unordered lists etc.

I have used only for an anchor tag. Although the same code can easily be modified to any elements by changing the selector.

jquery-logo-large1

jQuery Code

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  //live search function
  function live_search(list) {
    $(".filterinput")
      .change( function () {
        //getting search value
        var searchtext = $(this).val();
        if(searchtext) {
          //finding If content matches with searck keyword
          $matches = $(list).find('a:Contains(' + searchtext + ')').parent();
          //hiding non matching lists
          $('li', list).not($matches).slideUp();
          //showing matching lists
          $matches.slideDown();

        } else {
          //if search keyword is empty then display all the lists
          $(list).find("li").slideDown(200);
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    live_search($("#contents"));
  });
}(jQuery));

Here I have used jQuery :contains() Selector. The :contains() selector selects elements containing the specified string.

The string can be contained directly in the element as text, or in a child element.

I have used slideUp() and slideDown() functions to show & hide the matched lists

HTML Code

<div id="form">
<form action="#" class="search">
<input type="text" placeholder="type to filter" class="filterinput" />
</form>
</div>
<ol id="contents">
                                      <li>
                                         <a href="http://w3lessons.info/2013/12/10/facebook-style-location-sharing-map-with-google-api/">Facebook Style Location Sharing Map with Google API</a>
                                         <!-- Para -->
                                         <p>Facebook Style Location Sharing Map with Google API - w3lessons.info</p>
                                      </li>
                                      <li>
                                         <a href="http://w3lessons.info/2013/12/02/how-to-login-with-username-or-email-id-using-php-mysql/">How to Login with Username or Email Id using PHP & MYSQL</a>
                                         <p>How to Login with Username or Email Id using PHP & MYSQL - w3lessons.info</p>
                                      </li>
                                      <li>
                                         <a href="http://w3lessons.info/2013/11/25/getting-images-from-flickr-instagram-twitpic-imgur-deviantart-url-using-php-jquery/">Getting Images from Flickr, Instagram, Twitpic, Imgur & Deviantart Url using PHP & jQuery</a>
                                         <p>Getting Images from Flickr, Instagram, Twitpic, Imgur & Deviantart Url using PHP & jQuery - Now a days major sites are using this feature to automatically embed images from a url. So I am going to explain you how to get images from url using PHP &amp; jQuery</p>
                                      </li>
                                      <li>
                                         <a href="http://w3lessons.info/2013/11/18/facebook-style-hashtag-system-with-php-mysql-jquery/">Facebook Style Hashtag System with PHP, MYSQL & jQuery</a>
                                         <p>Facebook Style Hashtag System with PHP, MYSQL & jQuery - If you are not aware of Hashtag, then I will say you would not using any social networking sites in a very large extent.  Here I am going to explain you about the advantages of hashtag &amp; how you can implement it in your web projects using php &amp; mysql</p>
                                      </li>

</ol>

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

View Live Demo & Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2011/12/jquery-logo-large11.jpghttp://w3lessons.info/wp-content/uploads/2011/12/jquery-logo-large11-150x150.jpgKarthikeyan KFreebiesjquery
Today I am going to tell you how to search a text with in a DOM element using jQuery. There are so many plugins are available in the internet but here I didn't used any plugins.I hope this tutorial will add some nice user experience in your web projects.Live...