Live text search using jQuery

Someday before I faced a question of live text search using jQuery means how to search a text with in a DOM element using jQuery. Live search using jquery script can be integrated easily on any page where you are listing products, user profiles, news, blog posts & any ordered or unordered lists etc.

We can implement this script on any type of selector. Like first you fill up the friend list in your page and now you want to search your friend by his name in text box. As you input the character in the text box, search will be live and result would be filtered accordingly in respect of input characters in case insensitive manner.

View Demo

Live text search using jQuery

Script

 Here I am using inputbox keyup event to search on every character and checking the input value with the attribute data-name using regular expression. If match, show the friend with fadeIn effect else hide with fadeout effect.

We can use whatever attribute or data attribute name here according to that we need to change the script and also we can change the effect of showing and hiding also.

HTML

View Demo

Please don’t forget to share the post. Comments and feedbacks are always welcome.

You Might Interested In