jQuery Plugin To Filter DOM Elements By Tags - Tagsort

Tagsort is a lightweight, flexible jQuery plugin that provides a client side filtering on a grid of DOM elements categorized by tags.

Basic usage:

1. Load the stylesheet tagsort.min.css in the head section and the tagsort.min.js at the bottom of the document.

<link href="path/to/tagsort.min.css" rel="stylesheet"></link>
  ...
<script src="path/to/jquery.min.js"></script>
<script src="path/to/tagsort.min.js"></script>

2. Create a grid of DOM elements and assign single or multiple tags to them using data-item-tags attribute.

<div class="item" data-item-id="1" data-item-tags="tag-1">
  Item 1
</div>

<div class="item" data-item-id="2" data-item-tags="tag-2">
  Item 2
</div>

<div class="item" data-item-id="3" data-item-tags="tag-3">
  Item 3
</div>

...

3. Enable the filter.

• inclusive: when multiple tags are selected, all elements that contain ANY of those tags will be shown
• exclusive: when multiple tags are selected, only elements that contain ALL of those tags will be shown

$('div.tags-container').tagSort({
  items: '.item-tagsort',
  tagElement: 'span',
  tagClassPrefix: false,
  itemTagsView: false,
  itemTagsSeperator: ' ',
  itemTagsElement: false,
  sortType: 'exclusive',
  fadeTime: 0,
  reset: false,
  sortAlphabetical: false
});

Change logs:

2016-09-12

• bugfix

2016-09-09

• Add option for alphabetical sorting.

2016-03-12

• Added Reset Element Option

2016-03-07

• Fixed Flashing + Performance Improvements

2016-01-20

• Fixed bug with blank class prefix

2016-01-08

• Single filter bug fix

2016-01-06

• Single-select option and filtering

2015-08-12

• Fixed Bug with Inclusive Filtering

---

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