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>
  <p class="filter-me" data-html="HTML4">
    HTML 4
  </p>
  <p class="filter-me" data-html="XML">
    XML
  </p>
  <p class="filter-me" data-javascript="jQuery">
    jQuery
  </p>
  <p class="filter-me" data-javascript="JavaScript">
    JavaScript
  </p>
  <p class="filter-me" data-javascript="Angular">
    Angular
  </p>
  <p class="filter-me" data-javascript="React">
    ReactJS
  </p>
  <p class="filter-me" data-css="CSS3">
    CSS 3
  </p>
  <p class="filter-me" data-css="CSS4">
    CSS 4
  </p>
</div>

3. Filter the list by data name:

// no results
$(".filter-me").filterData("node").length

// output: 4
$(".filter-me").filterData("javascript").length

// output: HTML 5, HTML 4, XML
$(".filter-me").filterData("html").text();

4. Filter the list by data values:

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

Changelog:

v1.0.9 (2020-08-13)

• JS updated

---

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