Lightweight jQuery In-page Filtering Plugin - instaFilta

Lightweight jQuery In-page Filtering Plugin - instaFilta
File Size: 19 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.