I have multiple lists on one page (multiple categories of products) like this:
Category 1
- item1<
How about something like this:
HTML
- item1
- item2
- item3
- item27
- item28
JS
$(function(){
$('input[type="text"]').keyup(function(){
var searchText = $(this).val();
$('ul > li').each(function(){
var currentLiText = $(this).text(),
showCurrentLi = currentLiText.indexOf(searchText) !== -1;
$(this).toggle(showCurrentLi);
});
});
});
http://jsfiddle.net/EFTZR/146/
Another solution using filter(), which is mentioned below:
$('input[type="text"]').keyup(function(){
var that = this, $allListElements = $('ul > li');
var $matchingListElements = $allListElements.filter(function(i, li){
var listItemText = $(li).text().toUpperCase(),
searchText = that.value.toUpperCase();
return ~listItemText.indexOf(searchText);
});
$allListElements.hide();
$matchingListElements.show();
});
http://jsfiddle.net/EFTZR/441/