Filter & Sort A Group Of Elements Using jQuery Drizzle Plugin

Drizzle is a small, fast, high-performance jQuery sorting & filtering plugin for narrowing and resorting larget sets of data on the webpage.

Main features:

• Filter by CSS class.
• Filter by CSS ID.
• Filter by HTML Data attribute.
• Sort by number.
• Sort by alphabets.

How to use it:

1. Download and insert the minified version of the jQuery Drizzle plugin after the latest jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/drizzle.min.js"></script>

2. Categorize your data set using CSS class/ID or HTML data attribute as follows:

<ul class="demo">
  <li class="class-1">Item 1</li>
  <li>Item 2></li>
  <li class="class-1">Item 3</li>
  ...
</ul>

<ul class="demo">
  <li id="id-1">Item 1</li>
  <li>Item 2></li>
  <li id="id-1">Item 3</li>
  ...
</ul>

<ul class="demo">
  <li data-role="1">Item 1</li>
  <li>Item 2></li>
  <li data-role="1">Item 3</li>
  ...
</ul>

3. Initialize the Drizzle plugin.

var instance = $('ul.demo').drizzle({
    child:'li' // child element
});

4. Filter through the HTML list.

// filter by class
instance.filter('.class-1');

// filter by id
instance.filter('#id-1');

// filter by data attribute
instance.filter('[data-role="1"]');

5. Sort the HTML list.

instance.sort('.class', {
  order: 'desc' // or asc
});

instance.sort('#id', {
  order: 'asc'
});

instance.sort('[data-role]', {
  order: 'desc'
});

instance.sort('[data-number]', {
  order: 'desc',
  isNumber: true // default: false
});

6. Reset the HTML list.

instance.unfilter();
// or
instance.rain();
// or
instance.filter('*')

---

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