jQuery live filter

Question

我正在使用jQuery做一个实时过滤器。您可以选择名称中包含字符串的元素或/以及按位置和/或活动过滤的元素。就是这个想法。我的脚本工作正常，但在单独的模式下。我想在一场比赛中加入所有过滤器。我该怎么做？谢谢！

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

修改代码有点困难，但这里有一个想法：

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

当然，那里有很大的优化空间，但正如前面所说，这只是一个"想法"。

Answer 2

我有脚本工作!!!!!!现在，我应该致力于优化...知道吗？？:)谢谢！！！！！！

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