Как правильно отфильтровать список по нескольким критериям с помощью jQuery?

Question

Как правильно отфильтровать список по нескольким критериям с помощью jQuery?

0

Я хотел бы выполнить следующие действия над моей DOM:

Отфильтровать список через несколько элементов управления (в сочетании):

Флажки
Выбрать поля
Свободный ввод текста (например, http://vdw.github.io/HideSeek/)

Например, пользователь может выбрать город из поля выбора, который фильтрует отображаемые элементы. При вводе в поле ввода фильтр от выбора все еще находится на месте, дополнительно фильтруя отображаемые элементы по введенному тексту.

Обычно я пишу что-то вручную, чтобы объединить несколько вариантов из разных полей выбора, но это не идеально. Кроме того, для фильтра "свободного текста" я всегда использовал jQuery-Plugins, и они имеют тенденцию к сбросу выбора, когда вы начинаете вводить текст.

С таблицами я использую плагин datatables, который объединяет несколько фильтров. Он чрезвычайно многофункциональный, но также довольно тяжелый - и предназначен для таблиц, а не для любых типов списков.

Каковы общие рекомендации/рекомендации о том, как достичь этого?

PS: Вот как я это делаю сейчас. а) он чрезвычайно проприетарный и б) мне еще не удалось объединить его с текстовым фильтром:

function showItems(selectedCanton,showTypeOne,showTypeTwo){
    var typeOneSelector = '';
    var typeTwoSelector = '';

    if (selectedCanton=='all'){
        var cantonSelector = '';
    }
    else {
        var cantonSelector = '.list-item[data-canton="'+selectedCanton+'"]';
    }

    if (showTypeOne){
        if (showTypeTwo){
            selector = cantonSelector;
            //selector = cantonSelector+'[data-type="one"],'+cantonSelector+'[data-type="two"]';
        }
        else {
            selector = cantonSelector+'[data-type="one"]';
        }
    }
    else if (showTypeTwo){
        selector = cantonSelector+'[data-type="two"]';
    }
    $('.list-item').hide();

    console.log(selector);
    $(selector).show(); 
}

$(document).ready(function($){

        $(".filter-select").change(function() {     
            var selectedCanton = $("#canton").val(); 
            var showTypeOne = $("#type-one").prop('checked');
            var showTypeTwo = $("#type-two").prop('checked'); 
            showItems(selectedCanton,showTypeOne,showTypeTwo);
        });
});

Urs 29 апр. 2014, в 17:00

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

nrgjack · Accepted Answer · 2014-04-29T13-31-00.000Z

вы можете использовать функцию фильтра jquery.

попробуйте что-нибудь вроде

$('.list-item').hide();

$('.list-item').filter(function (index, e) {
    var condition = true;
    var el = $(e);

    if(showTypeOne)
    {
      condition = condition && (el.data("type") === "one");
    }

    if(showTypeTwo)
    {
        condition = condition && (el.data("type") === "two");
    }

    if(selectedCanton!='all')
    {
        condition = condition && (el.data("canton") === selectedCanton);
    }

    return condition;
 })
.show();

вы можете добавить текстовый фильтр так.

рабочий образец: http://jsfiddle.net/CufMp/1/