Фильтруйте несколько <ul>списков с помощью jQuery - PullRequest
Новая
       19

Фильтруйте несколько <ul>списков с помощью jQuery

16 голосов
/ 21 февраля 2012

У меня есть несколько списков на одной странице (несколько категорий товаров), например: 

<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>

Количество списков является переменным.

Я бы хотел фильтр как на демонстрационной странице здесь http://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html.

Но он должен искать по разным спискам.

Если пользователь ищет «2», то результат должен быть: 

<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>

Если он ищет «1», то это должно быть (не показывать заголовок h3 для списка, в котором нет результатов): 

<h3>Category 1</h3>
<ul id="category1">
    <li>item1</li>
</ul>

Может ли кто-нибудь мне помочь?

Заранее спасибо!

Ответы [ 2 ]

45 голосов
/ 21 февраля 2012

Как насчет этого:

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/

Другое решение с использованием 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/

2 голосов
/ 21 февраля 2012

Вы можете сделать это с помощью метода фильтра в 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;
});

Далее вы можете отобразить значения в переменной FilterItems в виде списка или чего-то подобного, используя цикл for.

...