Fast Client-side List Filter Plugin For jQuery - listFilter.js

listFilter.js is a lightweight jQuery filtering plugin that provides a fast way to filter through an html list by using data attribute or children element.

How to use it:

1. Load the latest version of jQuery (Slim build is recommended) and listFilter.js at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="jquery.listfilter.js"></script>

2. Initialize the plugin and we're ready to go.

$('#selector').listFilter();

3. Create a search field to filter through a specific html list using data attribute. Note that the index values in data attribute should be lowecased.

<p data-enable-listfilter="true" 
   data-listfilter-list="#target-list" 
   data-listfilter-by-attribute="true">
  <input type="search" placeholder="Type a phrase">
</p>

<ul id="target-list">
  <li data-listfilter-index="england">England</li>
  <li data-listfilter-index="gemany">Gemany</li>
  <li data-listfilter-index="united states">United States</li>
</ul>

4. Create a search field to filter through a specific html list by children element. Note: by-attribute method is much faster than byElement, because of CSS3 native selector usage.

<p data-enable-listfilter="true" 
   data-listfilter-list="#target-list" 
   data-listfilter-by-element="span:contains({{value}})">
  <input type="search" placeholder="Type a phrase">
</p>

<ul id="target-list">
  <li>England</li>
  <li>Deutschland</li>
  <li>Poland</li>
</ul>

5. Override the default trigger event.

$('#selector').listFilter({
  eventType: 'keyup' // or 'change'
});

---

This awesome jQuery plugin is developed by matthewbdaly. For more Advanced Usages, please check the demo page or visit the official website.