jQuery live filter

Question

I'm doing a live filter using jQuery. You can select the elements which have the string in their names or/and the elements filtering by location and/or activity. That's the idea. With my script is working ok but in separate mode. I'd like to join all the filters in just one match. How could I do it? Thanks!

$(document).ready(function (){
                jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
                    return function( elem ) {
                        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                    };
                });
                $("input").keyup(function(){
                            $(this).change();     
                });
                $("input").change(function(){
                            var filter = $(this).val().toLowerCase();
                            if(filter) {
                                 $matches = $('#list_pr, #list_ba').find('a:Contains(' + filter + ')').parent();
                                  $('li', '#list_pr, #list_ba').not($matches).slideUp();
                                   $matches.slideDown();
                            }else{
                                 $('#list_pr, #list_ba').find("li").slideDown();
                            }
                            return false;
                });
                $("#location").change(function(){
                    var filter = $(this).val();
                    if(filter != 'default') {
                        $matches = $('#list_pr').find("li a[alt*="+filter+"]").parent();
                         $('li', '#list_pr, #list_ba').not($matches).slideUp();
                         $matches.slideDown();
                    }else{
                         $('#list_pr, #list_ba').find("li").slideDown();
                    }
                    return false;
                });
                $("#category").change(function(){
                    var filter = $(this).val();
                    alert(filter);
                    if(filter != 'default') {
                        $matches = $('#list_pr').find("li a[alt*="+filter+"]").parent();
                         $('li', '#list_pr, #list_ba').not($matches).slideUp();
                         $matches.slideDown();
                    }else{
                         $('#list_pr, #list_ba').find("li").slideDown();
                    }
                    return false;
                });
    });

Answer 1

It's a little hard to modify your code but here is an idea for you:

function filterByText(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filterByLocation(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filterByCategory(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filter() {
    var result [];
    var listItems = $('#my_list li');
    var filterValue = $('#filter_input').val();

    result = filterByText(listItems, filterValue);

    if (/* filter by location is enabled */) {
        result = filterByLocation(result, filterValue);
    }
    if (/* filter by category is enabled */) {
        result = filterByCategory(result, filterValue);
    }

    // Present filtered items

    for (var i = 0; i < listItems.length; ++i) {
        if (result.indexOf(listItems[i]) > -1) {
            listItems[i].show(); // or .slideUp();
        } else {
            listItems[i].hide(); // or .slideDown();
        }
    }
}

$('#location, #category, input').change(function() {
    filter();
});

Of course, there is plenty of room for optimization there, but still, that is just an "idea" as a said earlier.

Answer 2

I have the script working!!!!!!! Now, I should work on optimization... any idea?? :) Thank you!!!!!!

$(document).ready(function (){
                jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
                    return function( elem ) {
                        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                    };
                });
                $("input").keyup(function(){
                        $(this).change();     
                });
                $("input, #provincia, #categoria").change(function(){
                    var filter1 = $("input").val().toLowerCase();
                    var filter2 = $("#provincia").val().toLowerCase().replace(" ","-");
                    var filter3 = $("#categoria").val().toLowerCase().split("/");
                    filter3 = filter3[0];

                    if(filter1 != '' && filter1 != 'nombre del comercio'){
                        if(filter2 != 'default' && filter3 == 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter2+"]").parent();
                        }else if(filter2 == 'default' && filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter3+"]").parent();
                        }else if(filter2 != 'default' && filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter2+"][title*="+filter3+"]").parent();   
                        }else{
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"]").parent();
                        }
                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();

                    }else if(filter2 != 'default'){
                        if(filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter2+"][title*="+filter3+"]").parent();
                        }else{
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter2+"]").parent();
                        }
                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();
                    }else if(filter3 != 'default'){
                        $matches = $('#list_pr, #list_ba').find("li a[title*="+filter3+"]").parent();

                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();
                    }else{
                        $('#list_pr, #list_ba').find("li").slideDown();

                    }
                    return false;
                });
    });