Блог

Я работаю над функцией поиска по списку людей. В настоящее время у меня есть два метода, которые могут фильтровать список (который представляет собой таблицу данных) — один метод представляет собой фильтр поиска, другой — выпадающее меню доступных вариантов. Вы можете увидеть это здесь: 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», чтобы сузить длинный список до только Тарига Хилала, у которого в основных областях есть слово «Конфликт». Однако прямо сейчас, когда я начинаю сужать поле поиска, фильтрация, выполняемая выпадающим фильтром, больше не влияет на список.

Думаю, я понимаю, почему это не работает, но у меня нет никаких идей о том, как изменить мою логику, чтобы заставить их работать вместе. Я хотел бы получить несколько предложений! Спасибо.

Редактировать: Я вроде как заставил это работать, удалив функции «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 {
            }
        });
    }
   });
});
  

Попросите один из методов фильтрации вызвать другой фильтр, предоставив необходимые параметры.