Filter Collections By Tags Or Input - jQuery AutoFilter

AutoFilter is a simple, lightweight jQuery live filter plugin that enables you to filter a collection of items (such as products, list items, grid items) by tags or input.

How to use it:

1. To get started, include the AutoFilter plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/autofilter.js"></script>

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

$(function($) {
  $.autofilter();
});

3. Enable the tags to filter your elements grouped by the data-tags attribute:

<!-- Filter Controls -->
<span data-filter>All</span>
<span data-filter="js">JavaScript</span>
<span data-filter="css">CSS</span>
<span data-filter="html">HTML</span>
<!-- Filterable Items -->
<div data-tags="js,css">Bootstrap</div>
<div data-tags="js">Angular</div>
<div data-tags="html,css">TailwindCSS</div>
<div data-tags="js">jQuery</div>
<div data-tags="js,html">React.js</div>
<div data-tags="js">Vue.js</div>

4. Enable a search field to filter your elements with the data-to-filter attribute

<!-- Search Field -->
<input type="text" placeholder="Search..." data-filter />
<!-- Filterable Items -->
<div data-to-filter>jQuery</div>
<div data-to-filter>Angular</div>
<div data-to-filter>React</div>
<div data-to-filter>VueJS</div>

5. Available options to customize the filter.

$.autofilter({

  // CSS class when shown
  showClass: 'show',

  // use HTML as filter string
  htmlAsFilter: false,

  // filter string as substring
  subString: false,

  // minimum characters to start filter in input mode
  minChars: 3,

  // is case sensitive?
  caseSensitive: false,

  // enable animation
  animation: true,

  // duration in ms
  duration: 0,

  // default filter on page load
  // this value must match the data-filter attribute value of a filter trigger element
  default: false,

  // name of the query parameter used to filter
  urlSearchParam: false,
  
});

Changelog:

2023-05-03

• v0.4.1: bugfix

2023-05-01

• v0.4: added default and urlSearchParam options

2021-10-14

• added new minChars setting.

---

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