jQuery Plugin For Fast Customized In-page Filtering - instaFilta2

instaFilta2 is a 2nd generation of jQuery instaFilta plugin that provides fast customized in-page filtering on a group of elements based upon user input. It has a whole bunch of options available for you to customize that experience to your liking.

Imagine that you are developing a page that has a huge list or table of data that is being generated by the server. Now imagine that you are an end-user that needs to scroll through all that data in order to find what is needed. This is where instaFilta2 can greatly improve that experience by filtering out unwanted items in real-time as the user types in a text field.

Basic usage:

1. Load jQuery library and the jQuery instaFilta2 plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="instafilta.min.js"></script>

2. Use a text input to filter a list of html elements you want.

<div class="example" id="demo">
  <fieldset class="controls">
    <input type="text" class="instafilta-trigger" placeholder="Type here to filter">
  </fieldset>
  <ul class="example-list">
    <li><span class="instafilta-target">Carbon</span></li>
    <li><span class="instafilta-target">Cobalt</span></li>
    <li><span class="instafilta-target">Copper</span></li>
    <li><span class="instafilta-target">Gallium</span></li>
    <li><span class="instafilta-target">Gold</span></li>
    <li><span class="instafilta-target">Hafnium</span></li>
    <li><span class="instafilta-target">Iridium</span></li>
    <li><span class="instafilta-target">Xenon</span></li>
  </ul>
</div>

3. Call the function on the top container to initialize the plugin with default options.

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

4. Options and defaults.

/* Outputs log messages in the JS console. */
enableLogging: false,

/* Selector to use for trigger elements. */
triggers: '.instafilta-trigger',

/* These are the actual target elements. Their text will get passed to the filtering process. */
targets: '.instafilta-target',

/* Set a parent element class to apply show/hide logic to it, rather than the actual target.  */
targetParentClass: null,

/* Selector to use for sections. */
sections: '.instafilta-section',

/* Matching targets will get this class. */
targetMatchClass: 'instafilta-match',

/* Non-matching targets will get this class. */
targetUnMatchClass: 'instafilta-unmatch',

/* Matching sections will get this class. */
sectionMatchClass: 'instafilta-match',

/* Non-matching sections will get this class. */
sectionUnMatchClass: 'instafilta-unmatch',

/* If markMatches is true, this class will be used for the span wrapping matching text. */
matchingTextClass: 'instafilta-matching-text',

/* Target data attribute used for categorization. */
categoryDataAttr: 'instafilta-category',

/* Target data attribute used for category group. */
categoryGroupDataAttr: 'data-instafilta-category-group',

/* Whether to use synonyms or not. */
useSynonyms: true,

/* Runs the filtering process one initial time just after setting up. */
filterOnLoad: true,

/* It can be wise to have a delay when using a text field on a huge list,
to allow for keystrokes to be collected. */
triggerDelay: 0,

/* Set to true to only match terms from the beginning of targets. */
beginsWith: false,

/* If using synonyms, these are the definitions of how they should be "translated" when comparing. */
synonyms: [
  { src: 'à,á,å,ä,â,ã', dst: 'a' },
  { src: 'À,Á,Å,Ä,Â,Ã', dst: 'A' },
  { src: 'è,é,ë,ê', dst: 'e' },
  { src: 'È,É,Ë,Ê', dst: 'E' },
  { src: 'ì,í,ï,î', dst: 'i' },
  { src: 'Ì,Í,Ï,Î', dst: 'I' },
  { src: 'ò,ó,ö,ô,õ', dst: 'o' },
  { src: 'Ò,Ó,Ö,Ô,Õ', dst: 'O' },
  { src: 'ù,ú,ü,û', dst: 'u' },
  { src: 'Ù,Ú,Ü,Û', dst: 'U' },
  { src: 'ç', dst: 'c' },
  { src: 'Ç', dst: 'C' },
  { src: 'æ', dst: 'ae' }
],

/* Decides whether to use jQuery to hide/show (if not, then CSS should be used). */
jQueryHideShow: true,

/* Set to true for case sensitive matching. */
caseSensitive: false,

/* Wraps a span around the matching part of the target's text. */
markMatches: false,

onFilterComplete: null,

/* A section will become unmatched when there are no matching targets left. */
hideEmptySections: true,

/* If true, the result will be combined across all initiators. */
combineInitiators: true,

/* Default initiator behavior definitions. */
initiatorBehaviors: [
  {
    'selector': '[type=text]',
    'events': 'keyup',
    'type': 'term',
    'termSrc': 'value'
  },
  {
    'selector': CONST.checkables,
    'events': 'change',
    'type': 'category',
    'termSrc': 'value',
    'groupBy': 'name',
    'noneMatchesAll': true
  },
  {
    'selector': 'select',
    'events': 'change',
    'type': 'category',
    'termSrc': 'value',
    'noneMatchesAll': true
  }
]

Change log:

2015-11-09

• Fixed bug where synonyms were not replaced globally

---

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