Is there a way to use javascript/jquery to search a group of li tags and narrow the search down

Question

I have been looking all over the web for ideas on how to do this. I have a DrillDown menu that at some points goes six levels deep (not my choice this is what the customer wants) I have created an xml document that holds all of these items there are a total of 106 different options that a user can select just in the side menu alone (again its what the customer wants). I want to create a search box that would allow me to type in the name of one of the selections and the list would shrink to only show the options with the word(s) that the user inputs.

My question Is there a plugin that would allow this behavior?

If not How do you search a group of li elements for text?

Answer 1

To code it yourself would be fairly straightforward, the jQuery below takes a string from the input #inputString and will iterate through the list items "ul li" and show/hide depending if they match the input string.

You can modify the "ul li" selector to contain other lists if needed

jQuery("#inputString").keyup(function () {
    var filter = jQuery(this).val();
    jQuery("ul li").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show()
        }
    });
});

I expect there are many plugins that do the same thing, give it a google!