jQuery Inline Search Plugin
This tiny yet powerful jquery plugin tutorial will teach you how to make an inline search with jquery. This can be applied to ANY elements in the DOM, table rows, table cells, spans within a div, every paragraph on a site, anything.
jquery plugin step 1. Create a new jquery method similar to below, basically what this is saying is to extend the jquery $ namespace with your function of search.
$.fn.<strong>search</strong> = function(searchElements) {
};Step 2. The this keyword simply contains the currently selected elements, so later when we call $('input#inline-search').search(); input#inline-search is what is being passed to this. Followed of course by the keyup event.
$.fn.search = function(searchElements) {
$(this).keyup(function(){
});
};Step 3. Store the search string using the .val(); method. searchElements which can be passed into our search(); method is simply what elements you will be searching in, this can be almost anything, examples might be 'table tr', 'table tr td', 'select option', 'table tr, select option' for multiple element searching! etc.
$.fn.search = function(searchElements) {
$(this).keyup(function(){
var searchString = $(this).val();
});
};Step 4. Now we are simply checking the length inputted to the search field, when nothing is entered we want to show all the elements. When something is being searched for we want to check if searchElements contains that string anywhere within the html it contains and then show it of it does.
$.fn.search = function(searchElements) {
$(this).keyup(function(){
var searchString = $(this).val();
if (searchString.length > 0){
$(searchElements).hide();
$(searchElements+':contains(' +searchString+ ')').show();
}
else {
$(searchElements).show();
}
});Final jquery plugin development code
$(document).ready(function(){
$('input#inline-search').search('select option');
});
$.fn.search = function(searchElements) {
$(this).keyup(function(){
var searchString = $(this).val();
if (searchString.length > 0){
$(searchElements).hide();
$(searchElements+':contains(' +searchString+ ')').show();
}
else {
$(searchElements).show();
}
});
};
Delicious
Digg
StumbleUpon
Reddit
Facebook
Comments
Dont have 6000 li elements lol thats a big no no to begin with
Hi, this tutorial is very awesome and so easy to implement. I tried using this in searching text inside an li tag. It works perfectly with 100 - 500 li tags but when you try to search in almost 6000 li, the browser will then throw a busy script notification. Is there other way to do this in jquery?
You saved my day, this is perfect plugin man, i wrote about there, if you interested to check the problem your plugin solved:http://stackoverflow.com/questions/574816/search-in-html-javascript
Hi!
Thanks for posting this code, found it very useful.
First, i found this piece of code somewhere and made the search case-insensitive:
$.expr[':'].containsIgnoreCase = function(a,i,m){
return $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
and changed this line:
$(searchElements+':contains(' +searchString+ ')').show();
to this:
$(searchElements).filter(':containsIgnoreCase(' +searchString+ ')').show();
Also i had a problem with internet explorer, when selecting elements to search by classname. By default jQuery looped through all elements on the page, and looked for the classname and searched text simultaneously, so this was horribly slow on an element-rich webpage. So i applied the content filter after the elements with the class were selected, and the speed improved dramatically, hence the use of '.filter()' in the above line of code.
Whooops, you've posted solution with example. Sorry for my stupid question then.
--
regards
kobe
Hello,
everything is fine but that does not work with IE7 - I checked with Firefox and it works. Do you have any idea why?
--
regards
kobe
Hi,
Thankyou so much for the example. I've used it in our project.
Here is a working example:
http://suneelgv.googlepages.com/jquerysearch
do you have an working example?
I do not understand how to start the inline search. If i define a input field with id inline-search, nothings happens. I think I have to initiate the functionality somehow, but I do not know how.
Cheers -- jErik
good