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, 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($) {

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.


  // 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 usage, please go to the official website.

Related Posts


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

Leave a Reply

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