问题
I have multiple lists on one page (multiple categories of products) like this:
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
The amount of lists is variable.
I would like a filter like on the demo page here http://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html.
But it should search over the different lists.
If the user searches for "2" then the result should be:
<h3>Category 1</h3>
<ul id="category1">
<li>item2</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
If he searches for "1" then it should be (don't show h3 title for list where there are no results):
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
</ul>
Can someone help me?
Thanks in advance!
回答1:
How about something like this:
HTML
<input type="text" />
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item27</li>
<li>item28</li>
</ul>
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/
回答2:
You can do this with the filter method in jQuery:
var valueToSearch = "item1"; // this one should come from the search box
var allListItems = $("ul > li");
var filteredItems = allListItems.filter(function(index) {
var listItemValue = $(this).text();
var hasText = listItemValue.indexOf(valueToSearch) > -1;
return hasText;
});
Next, you can display the values in the filteredItems variable in a list or something like that, using a for loop.
来源:https://stackoverflow.com/questions/9375079/filter-multiple-ul-lists-with-jquery