I’m working on a search function for a list of people. I have currently have two methods that can filter the list (which is a table of data) - one method is a search filter, the other is a drop down menu of available choices. You can see this here:
http://cambridgefellows.com/directory-of-fellows/

The search function uses this code:

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

And the drop down filter uses this code:

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

My question is: How can I get these to function together? I’m not understanding right now why they don’t. I need to be able to filter the list with one filter, then additionally filter it by a second filter. For example I might want to use the drop down menu to select only “Center for Public Leadership Emirates Leadership Initiative Fellow” fellowships, and then further refine my search by typing in the word “conf” to narrow the long list down to only Tarig Hilal, who has the word “Conflict” in Focus Areas. However right now when I begin to narrow down with the search field, the filtering performed by the drop down filter no longer affects the list.

I think I understand why it’s not working, but I don’t have any ideas for how to rearrange my logic to get them to work together. I’d love some suggestions! Thank you.

Read more here: How can I get these two filtering methods to work concurrently?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: