Filter HTML Elements By Data Name & Value - data-filter

File Size: 16.7 KB
Views Total: 11698
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Filter HTML Elements By Data Name & Value - data-filter

A tiny and performant data filtering plugin that makes it possible to filter through a list of entries by data names or data values you specify.

How to use it:

1. Download and place the JavaScript file jquery-data-filter.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery-data-filter.min.js"></script>

2. Categorize your data using data attributes as follows:

<div id="language-list">
  <p class="filter-me" data-html="HTML5">
    HTML 5
  <p class="filter-me" data-html="HTML4">
    HTML 4
  <p class="filter-me" data-html="XML">
  <p class="filter-me" data-javascript="jQuery">
  <p class="filter-me" data-javascript="JavaScript">
  <p class="filter-me" data-javascript="Angular">
  <p class="filter-me" data-javascript="React">
  <p class="filter-me" data-css="CSS3">
    CSS 3
  <p class="filter-me" data-css="CSS4">
    CSS 4

3. Filter the list by data name:

// no results

// output: 4

// output: HTML 5, HTML 4, XML

4. Filter the list by data values:

// output: jQuery
$(".filter-me").filterData("javascript", "jQuery").text();


v1.0.9 (2020-08-13)

This awesome jQuery plugin is developed by godoyrw. For more Advanced Usages, please check the demo page or visit the official website.