Filter Collections By Tags Or Input - jQuery AutoFilter
File Size: | 4.17 KB |
---|---|
Views Total: | 3775 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.