jQuery Plugin for Client-side List Filtering | filterThis

filterThis jQuery plugin for client-side list filtering is a simple JQUERY component that enables you to filter a dynamic HTML menu through an input field.

jquery multiple filter plugin, jquery advanced search filter, jquery filter checkbox list, jquery category filter

How to make use of it:

1. Download and include the additional component JQUERY Filterthis Library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="filterThis.js"></script>

2. Create a list of elements.

<ul class="group">
  <li class="group">
    <div class="user">
      <p class="name"> Derek Ortiz </p>
      <p> [email protected] </p>
  <li class="group">
    <div class="user">
      <p class="name"> Sad kitten </p>
      <p> [email protected] </p>
  <li class="group">
    <div class="user">
      <p class="name"> Kermit The Frog </p>
      <p> [email protected] </p>

3. Create a text field to filter the HTML menu. The data filter goal feature is used to determine the target determinants for the list filter.

<input class="filter-box" type="text" 
       data-filter-target=".user p.name" 

4. Call the additional component on the document.


jQuery Plugin To Filter List Based On User Input, filterThis Plugin/Github

See Demo And Download

Official Website(derekortiz): Click Here

This superior jQuery/javascript plugin is developed by derekortiz. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…