jQuery Filter List Search Example

Today I am going to tell you how to filter the text inside the list using jQuery. There are so many plugins are available in the internet but here I didn’t used any plugins. This jQuery Filter List Search is used to search any texts inside the list (ul,ol li tags).

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

jQuery Filter List Search 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.

Checkout my latest tutorial on Top 20 jQuery Code Snippets for Web Developers

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

jQuery Code to Filter List Search

(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!