Question

我正在为一个人的列表开发搜索功能。我目前有两种方法可以过滤列表（这是一个数据表） - 一种方法是搜索过滤器，另一种是可用选项的下拉菜单。你可以在这里看到： http://cambridgefellows.com/directory-of-fellows/

搜索功能使用此代码：

    $(document).ready(function() {
       $('input[name=searchFilterInput]').keyup(function() { 
                var searchFilterVal = $('input[name=searchFilterInput]').val();
        searchFilterVal = searchFilterVal.replace(/ /g, '-');
        searchFilterVal = searchFilterVal.toLowerCase();

        if(searchFilterVal == '') {
            $('tr.hide').fadeIn('slow').removeClass('hide');
        } else {

            $('tr.fellows').each(function() {
            var pattern = $(this).attr('class');    // the pattern to be matched 
            var match = pattern.match(searchFilterVal);//If pattern matches it returns the match

            if(!match) {
                    $(this).fadeOut('normal').addClass('hide');

                } else {
                    $(this).fadeIn('slow').removeClass('hide');
                }
            });
        }
   });
});

下拉过滤器使用以下代码：

$(document).ready(function() {
    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter.current').removeClass('current');
        $(this).parent().addClass('current');

        //var filterVal = $(this).text().toLowerCase().replace(' ','-');

        var filterVal = $(this).text();
        filterVal = filterVal.replace(/ /g, '-');
        filterVal = filterVal.toLowerCase();

        if(filterVal == 'all') {
            $('tr.hidden').fadeIn('slow').removeClass('hidden');
                            $('tr.hide').fadeIn('slow').removeClass('hide');
                        $('#searchFilterID').val('');
        } else {

            $('tr.fellows').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});

我的问题是：我怎样才能让它们一起发挥作用？我现在不明白他们为什么不这样做。我需要能够使用一个过滤器过滤列表，然后再通过第二个过滤器过滤它。例如，我可能想使用下拉菜单仅选择“公共领导中心阿联酋领导倡议研究员”奖学金，然后通过输入单词“conf”进一步优化我的搜索，将长列表缩小到只有Tarig Hilal ，谁在焦点领域有“冲突”一词。但是现在，当我开始使用搜索字段缩小范围时，下拉过滤器执行的过滤不再影响列表。

我想我明白为什么它不起作用，但我对如何重新排列逻辑以使它们一起工作没有任何想法。我喜欢一些建议！谢谢。

编辑：我通过从两个过滤器中删除“else”函数并在最初调用每个过滤器时删除“hide”类来实现此功能。它有效，但是以一种非常“眨眼”的方式 - 它有点奇怪。肯定有更好的办法。我绝对会重视任何建议。

$(document).ready(function() {
$('ul#filter a').click(function() {
    $('tr.hidden').fadeIn('slow').removeClass('hidden');
    $(this).css('outline','none');
    $('ul#filter.current').removeClass('current');
    $(this).parent().addClass('current');

    //var filterVal = $(this).text().toLowerCase().replace(' ','-');

    var filterVal = $(this).text();
    filterVal = filterVal.replace(/ /g, '-');
    filterVal = filterVal.toLowerCase();

    if(filterVal == 'all') {
        $('tr.hidden').fadeIn('slow').removeClass('hidden');
                    $('tr.hide').fadeIn('slow').removeClass('hide');
                    $('#searchFilterID').val('');
    } else {

        $('tr.fellows').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
            }
        });
    }

    return false;
});
});

和

$(document).ready(function() {
       $('input[name=searchFilterInput]').keyup(function() { 
    var searchFilterVal = $('input[name=searchFilterInput]').val();
    searchFilterVal = searchFilterVal.replace(/ /g, '-');
    searchFilterVal = searchFilterVal.toLowerCase();
    $('tr.hide').fadeIn('slow').removeClass('hide');

    if(searchFilterVal == '') {
        $('tr.hide').fadeIn('slow').removeClass('hide');
    } else {

        $('tr.fellows').each(function() {
        var pattern = $(this).attr('class');    // the pattern to be matched 
        var match = pattern.match(searchFilterVal);//If pattern matches it returns the match

        if(!match) {
                $(this).fadeOut('normal').addClass('hide');

            } else {
            }
        });
    }
   });
});

Answer 1

让其中一个过滤方法调用另一个过滤器，提供必要的参数。

如何让这两种过滤方法同时工作？

1 个答案: