过滤多个< ul>列表与jQuery [英] Filter multiple <ul> lists with jQuery

问题描述

我有一个页面上的多个列表（多个类别的产品），像这样：

 < h3>类别1< / H3> 
< ul id =category1> 
< li> item1< / li> 
< li> item2< / li> 
< li> item3< / li> 
< / ul> 
< h3>类别2< / h3> 
< ul id =category2> 
< li> item27< / li> 
< li> item28< / li> 
< / ul> 
  

列表的数量是可变的。

我想在这里演示页面上的过滤器 http：//static.railstips .org / orderedlist / demos / quicksilverjs / jquery.html 。

但它应该搜索不同的列表。

如果用户搜索2，那么结果应该是：

 < h3>类别1< ; / H3> 
< ul id =category1> 
< li> item2< / li> 
< / ul> 
< h3>类别2< / h3> 
< ul id =category2> 
< li> item27< / li> 
< li> item28< / li> 
< / ul> 
  

如果他搜索1，那么它应该是（不要显示列表中的h3标题没有结果）：

 < h3>类别1< / h3> 
< ul id =category1> 
< li> item1< / li> 
< / ul> 
  

有人可以帮忙吗？

解决方案

strong> 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
< pre $ $ $ $ $ $ $ $ $ $ $'$'$'$'$'$'$'$'$'$'$'$' b $ b var searchText = $（this）.val（）;
$ b $（'ul> li'）。each（function（）{

var currentLiText = $（this）.text（），
showCurrentLi = currentLiText.indexOf（searchText）！== -1;
$ b $（this）.toggle（showCurrentLi）;

}）;
}）;

}）;

http： //jsfiddle.net/EFTZR/146/

使用 filter（），如下所示：

  $（'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/

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!

解决方案

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/

这篇关于过滤多个&lt; ul&gt;列表与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！