Press "Enter" to skip to content

Filter Any HTML Element By Tags or Input Value | AutoFilter

AutoFilter is an easy-to-use jQuery plugin that allows you to filter any HTML element by tags or input valueΒ that lets you filter a set of items (such as products, menu items, and grid items) by tags or input.

jquery tags input, jquery tags input autocomplete, jquery autocomplete tags multiple, bootstrap tags input textarea, bootstrap tags input jsfiddle, jquery tag plugin, inputfilter jquery, jquery tags input get value

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

Official Website(GianlucaChiarani): Click Here

This superior jQuery/javascript plugin is developed by GianlucaChiarani. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *