Question

196

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

rated 0 times [ 199] [ 3] / answers: 1 / hits: 16713 / 11 Years ago, thu, april 4, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 2 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 11 Years ago anders · Accepted Answer

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!