Lightweight jQuery In-page Filtering Plugin - instaFilta

instaFilta is an ultra-light (~2kb minified) jQuery plugin that enables you to filter & narrow a list of DOM elements through live text search.

Check out the instaFilta V2.

How to use it:

1. Load the jQuery library and the jQuery InstaFilta plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="instafilta.min.js"></script>

2. Create an input filed to act as a filter on the list of DOM elements.

<input type="text" id="demo" placeholder="Type to filter">

3. Create a list of DOM elements as follows.

<div class="section">
  <h2 class="section-title">A</h2>
  <ul class="section-list">
    <li class="section-item">Amy</li>
    <li class="section-item">Anakin Skywalker</li>
    <li class="section-item">Albert</li>
    <li class="section-item">Andy Panda</li>
  </ul>
</div>
<div class="section">
  <h2 class="section-title">B</h2>
  <ul class="section-list">
    <li class="section-item">Bob</li>
    <li class="section-item">Bonnie</li>
    <li class="section-item">Boogie Woogie</li>
    <li class="section-item">Barry</li>
  </ul>
</div>
<div class="section">
  <h2 class="section-title">C</h2>
  <ul class="section-list">
    <li class="section-item">Carrie Bradshaw</li>
    <li class="section-item">Carl</li>
    <li class="section-item">Cindy</li>
    <li class="section-item">Cameron</li>
    <li class="section-item">C-3PO</li>
  </ul>
</div>

...

4. Call the plugin on the input field and setup the options.

$(function() {
$('#demo').instaFilta({
targets: '.section-item',
sections: '.section',
hideEmptySections: true,
beginsWith: false,
caseSensitive: false,
typeDelay: 0
});
});

5. Available options.

• targets: '.instafilta-target': Classname of an individual item.
• scope: null: Classname of an element in which the input field and the targets are enclosed. Use this if you want to use multiple filter sections on your page.
• categoryDataAttr: 'instafilta-category': Name of data attributes in which to look for categories.
• sections: '.instafilta-section': Classname of the sections holding the items.
• matchCssClass: 'instafilta-match': Classname of the spans indicating matching text.
• itemsHideEffect: 'hide': What jQuery effect to use for hiding items (slideUp etc.).
• itemsHideDuration: 0: Duration (in ms) of item hide effect.
• itemsShowEffect: 'show': What jQuery effect to use for showing items (slideDown etc.).
• itemsShowDuration: 0: Duration (in ms) of item show effect.
• sectionsHideEffect: 'hide': What jQuery effect to use for hiding sections (slideUp etc.).
• sectionsHideDuration: 0: Duration (in ms) of section hide effect.
• sectionsShowEffect: 'show': What jQuery effect to use for showing sections (slideDown etc.).
• sectionsShowDuration: 0: Duration (in ms) of section show effect.
• onFilterComplete: null: Callback which is fired when the filtering process is complete. RecievesmatchedItems, which is jQuery containing all matched items.
• markMatches: false: If true, natching text will get wrapped by a span having the class name of matchCssClass.
• hideEmptySections: true: If using sections, this option decides whether to hide sections which did not have any matching items in them.
• beginsWith: false: We can choose to match the beginning of an item's text, or anywhere within.
• caseSensitive: false: Whether to ignore character casing.
• typeDelay: 0: The filtering process takes place on the keyUp event. If you have a large list of items to process, you might want to set a higher value (in milliseconds) to prevent the filtering to be able to occur so frequently. So in other words, it would kind of "wait" a bit while the user types.
• useSynonyms: true: When set to true, this option will also match user input against a synonym list.
• synonyms: []: List of objects that contain synonyms. 

6. Public methods.

• filterTerm: Can be used to programmatically apply a filter. For normal simple usage, you will probably not be needing this.
• filterCategory: Applies a category filter that matches data attributes

Change logs:

2015-04-02

• filterCategories now accepts requireAll param.
• Demo update.

2015-03-25

• filterCategories now supports string and array.

2015-03-23

• cleanup and update demo.

2015-03-21

• Improve demo.

2015-02-06

• Show/hide options and onFilterComplete callback.

2015-01-19

• Added new method: filterCategory.

2015-01-18

• Added default synonyms for lowercase 'i'.

2015-01-16

• Added æ as a default synonym.

2014-12-16

• Moved var into function scop

2014-12-15

• multi-filter support

2014-09-02

• New options markMatches and matchCssClass

---

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