Accordion Live Filter
jQuery plugin to live filter an accordion list.
Download the css file and the js file from the dist folder (you'll see that they're already minified for you). If you'd like you can also grab the un-minified, commented versions in the src folder. Next, include the css file in the head of your webpage, and the js file in the footer. Finally, make a call to start the script.
For example, you may try this:
<html> <head> <title>My Site!</title> <!-- more stuff ... --> <link rel="stylesheet" src="css/accordion-live-filter.min.css"> </head> <body> <h1>Things!</h1> <input class="alf-filter" data-alf="#alf-menu" placeholder="Filter!"> <ul id="alf-menu" class="alf-filterable"> <li> <label>Category 1</label> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </li> <!-- rinse and repeat --> </ul> <script src="js/jquery.accordion-live-filter.min.js"></script> <script>$('.alf-filter').accordionLiveFilter();</script> </body> </html>
For a more indepth, working example, check out the demo.
There are some required structure of the dom elements as well as some particular attributes that are necessary.
First, the filter input field must have a data attribute that has the jQuery selector for the associated accordion. By
default, this is
data-alf but can be customized with the call to the plugin (detailed later).
The accordion should have a class that dictates the actual layout of the accordion. In this case, the default in the css
alf-filterable - this indicates that this particular element is filterable and also sets up the style for the
Properly nested ul/li elements should be used for the accordion. A category should be indicated by a label element with its associated values below it.
When searching, a class of
alf-matched is added to an element which by default is bolded. This style can be overriden
as well as the class in the plugin options below.
The class of
alf-expanded is added to label elements when their child list is expanded. This can also be changed in the
plugin options - but make sure to adjust your source CSS then.
alf-filter-clear but can be
changed in the plugin options. Make sure to create appropriate CSS for this element if you change the class name.
The plugin allows an options object to be passed in for each instance it is applied to. The options are as follows:
|dataAccordionReference||alf||This string is appended to
|matchedClass||alf-matched||This class is assigned to an elemenet when the filtering has matched a partial or whole part of the element.|
|expandedClass||alf-expanded||This class is assigned to the label element when its child is expanded|
For example, if you'd like to apply this plugin to an element with the id of
my-filter-input but make the matched class be
my-matched, you would do the following:
Remember to alter your CSS to properly style the matched element using this new class, however!
Known Issues / Limitations
Currently, this only supports IE 11+, Firefox, Chrome, Safari. It has not been tested on any other browser.
This only supports one level of nested, filterable items. It may work but is not currently supported at this time. (Pull requests are very welcome, though!)