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

我正在开发一个搜索功能，可以搜索一组人。我目前有两种方法可以过滤列表（这是一个数据表）——一种是搜索过滤器，另一种是可用选项的下拉菜单。你可以在这里看到：

搜索功能使用以下代码：

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

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

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

及

---

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

这听起来很有希望，但我不确定我将如何做到这一点。我刚才确实通过从每个过滤器中删除

else

使其工作。但是用户必须在每次搜索后重置。但这是朝着正确方向迈出的一步。你提到的已经起作用了，我已经检查过了，请再次检查。我编辑了我的原始问题，以包括我所做的使过滤器协同工作的操作，但由于我正在清除每个按键上的过滤器，因此如果在搜索字段中键入许多字符，会出现一些闪烁和轻微延迟。这让我想知道，是否还有比我目前所提出的更优雅的解决方案。但我会把这个问题标记为已回答，因为它至少是有效的。