How to properly filter a list by multiple criteria with jQuery?

Question

I would like to perform the following actions on my DOM:

Filter a list via multiple controls (combined):

• Checkboxes
• Select boxes

• Free text input (like e.g http://vdw.github.io/HideSeek/)

  So for example, the user can select a city from the select box, which filters the displayed items. When typing into the input field, the filter from the select is still in place, further filtering the displayed items by the entered text.

I normally write something by hand to combine multiple choices from different select boxes, but it's not ideal. Also, for a "free text" filter, I have always used jQuery-Plugins, and they tend to reset the selection when you start typing.

With tables, I use the datatables plugin, which brings along multiple filters. It's extremely feature-rich, but also quite heavy - and designed for tables, not for any type of lists.

What are the general recommendations / outlines on how to achieve this?

PS: Here's how I do it now. a) it's extremely proprietary and b) I haven't managed to combine it with a text filter yet:

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

you can use filter function of jquery.

try something like

$('.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();

you could add text filter easly that way..

working sample : http://jsfiddle.net/CufMp/1/