jQuery Plugin To Filter DOM Elements By Tags - Tagsort

jQuery Plugin To Filter DOM Elements By Tags - Tagsort
File Size: 7.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.