Simple jQuery Search Filter

by Karthikeyan K · Last Updated January 25, 2019

Last modified on January 25th, 2019 by Karthikeyan K

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

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