Flexible Generic Filtering & Sorting Plugin For jQuery - JFilter.js

JFilter.js is a lightweight jQuery plugin which allows you to filter Html elements (e.g. table rows/columns, list items, etc) through live text search.

How to use it:

1. Load the JFilter.js script after jQuery JavaScript library, but before the </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jfilter.js"></script

2. Add class "searchable" on a container to filter all of the child elements.

<ul id="demo" class="searchable" >
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

3. Call the function and done. The plugin will automatically append a live search input to the parent container.

$('#demo').jfilter();

4. Default settings.

$('#demo').jfilter({

// change input group addon
addon       : 'Search',

// change the placeholder input
placeholder : 'Search here...',

// change class searchable
class       : 'searchable',

// custom the search input
template    : '<div class="input-group filter"><span class="input-group-addon">Search</span><input type="text" class="form-control" placeholder="Search here..." ></div>'

});

---

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