Question

I’m building a simple search feature using jQuery that will filter a list of items based on what the user enters as a query. It won’t do any fancy algorithms, just a simple match.

Fiddle here: http://jsfiddle.net/T7hF3/

As you can see I have nested lists. The plan is that if any of the list items match, then it should show the highest parent <li> and hide all the others that don’t have matching items.

If the user types nothing then all of the list items should show again!

Can anyone help point me in the right direction. I’ve tried using the jQuery each method to find all the items that contain the query and show them, but it instead hides them all…

Answer 1

It didn’t like your use of contains(), which is for elements, not text. I changed it to use a filter. I also made it hide every element, not just the child li elements, so that everything was hidden.

It now works, but bear in mind that it’s case sensitive…

Working jsfiddle example

$('form.groups-search').live('submit', function(e) {
    e.preventDefault();
    query = $('input#q').val();
    if (query === "") {
        $('ul.groups-tree *').show();
    } else {
        $('ul.groups-tree *').hide();
        $('ul.groups-tree li').filter(function () {
            return $(this).text().indexOf(query) != -1;
        }).show().parents().show();
    }
});?