Question

我想在我的DOM上执行以下操作：

通过多个控件（组合）过滤列表：

复选框
选择框
自由文字输入（例如http://vdw.github.io/HideSeek/）

因此，例如，用户可以从选择框中选择一个城市，该城市会过滤显示的项目。在输入字段中键入时，选择中的过滤器仍然存在，进一步按输入的文本过滤显示的项目。

我通常手工编写一些内容来组合来自不同选择框的多个选项，但这并不理想。另外，对于“自由文本”过滤器，我一直使用jQuery-Plugins，当你开始输入时，他们倾向于重置选择。

使用表格，我使用datatables插件，它带来了多个过滤器。它功能非常丰富，而且非常重 - 专为桌子设计，不适用于任何类型的列表。

关于如何实现这一目标的一般建议/大纲是什么？

PS：我现在就是这样做的。 a）它是非常专有的; b）我还没有设法将它与文本过滤器结合起来：

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);
        });
});

Answer 1

你可以使用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/

如何使用jQuery通过多个条件正确过滤列表？

1 个答案: