This repository has been archived by the owner. It is now read-only.
jQuery plugin to live filter an accordion list
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Added the distribution files, and separated out the css and documente… Jan 31, 2016
dist utf-8 this snizzle Feb 24, 2016
src update js to keep comment Feb 28, 2016
.gitignore Update commit. Jan 30, 2016
LICENSE Initial commit Jan 30, 2016
README.md Updated the documentation Jan 31, 2016
demo.gif Added the demo Jan 30, 2016

README.md

Accordion Live Filter

jQuery plugin to live filter an accordion list.

Demo

Getting Started

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.

Options/Requirements

There are some required structure of the dom elements as well as some particular attributes that are necessary.

Mark up

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 file is alf-filterable - this indicates that this particular element is filterable and also sets up the style for the accordion.

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.

A filter input clear button is added dynamically using javascript. The class by default is 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.

Plugin Options

The plugin allows an options object to be passed in for each instance it is applied to. The options are as follows:

Option Default Description
dataAccordionReference alf This string is appended to data- to make a data attribute that holds the selector for the associated accordion. By default, the alf example means an element of data-alf will be used.
clearFilterClass alf-filter-clear This class is used in both the CSS to position the filter input clear button, as well as the javascript to indicate that this button is used to clear the filter element.
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:

$('#my-filter-input').accordionLiveFilter({matchedClass: 'my-matched'});

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!)