How to make use of it:

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

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

2. Initialize the plugin and we’re able 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 parts 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 choices to customize the filter.

$.autofilter({

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

  // use HTML as filter string
  htmlAsFilter: false,

  // filter string as substring
  subString: false,

  // is case sensitive?
  caseSensitive: false,

  // enable animation
  animation: true,

  // duration in ms
  duration: 0
  
});

Filter Collections By Tags Or Input, AutoFilter Plugin/Github

See Demo And Download