Stylish & Customizable jQuery Tags Input Plugin - taggingJS

Stylish & Customizable jQuery Tags Input Plugin - taggingJS
File Size: 240 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

taggingJS is a simple jQuery plugin for creating a customizable and cross-browser tags input which allows the visitor to add/remove multiple tags with ease. Press Enter or Comma to create a new tag, Backspace or Delete to remove the last one.

See also:

Basic Usage:

1. Include jQuery javascript library and the jQuery taggingJS javascript and basic stylesheet files on your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="tagging.js"></script> 
<link href="tag-basic-style.css" rel="stylesheet">

2. Create a tags input following the Html structure like this.

<div data-name="tag" id="tag">My Tag</div>

3. That's it. The plugin will auto create a hidden input filed appending to the DIV element you just created.

4. Available options.

  • "case-sensitive": false: True to allow differences between lowercase and uppercase
  • "close-char": "&times;": Single Tag close char
  • "close-class": "tag-i": Single Tag close class
  • "edit-on-delete": true: True to edit tag that has just been removed from tag box
  • "forbidden-chars": [ ".", "_", "?" ]: Array of forbidden characters
  • "forbidden-chars-callback": window.alert: // Function to call when there is a forbidden chars
  • "forbidden-chars-text": "Forbidden character:": Basic text passed to forbidden-chars callback
  • "forbidden-words": []: Array of forbidden words
  • "forbidden-words-callback": window.alert: // Function to call when there is a forbidden words
  • "forbidden-words-text": "Forbidden word:": // Basic text passed to forbidden-words callback
  • "no-backspace": false: Backspace key remove last tag, true to avoid that
  • "no-comma": false: // Comma "," key add a new tag, true to avoid that
  • "no-del": false: Delete key remove last tag, true to avoid that
  • "no-duplicate": true: No duplicate in tag box
  • "no-duplicate-callback": window.alert:    // Function to call when there is a duplicate tag
  • "no-duplicate-text": "Duplicate tag:":    // Basic text passed to no-duplicate callback
  • "no-enter": false: // Enter key add a new tag, true to avoid that
  • "no-spacebar": false: Spacebar key add a new tag by default, true to avoid that
  • "pre-tags-separator": ", ":   // By default, you must put new tags using a new line
  • "tag-box-class": "tagging":   // Class of the tag box
  • "tag-char": "#": Single Tag char
  • "tag-class": "tag": Single Tag class
  • "tags-input-name": "tag": Name to use as name="" in single tags (by default tag[])
  • "tag-on-blur": true: Add the current tag if user clicks away from type-zone
  • "type-zone-class": "type-zone": Class of the type-zone
  • "tag-box-editable-class": "editable": Class of the tag box when editable, used together with tags-limit option for css targeting.
  • "tags-limit": 0: Limit the number of tags that can be added, zero means no limit.

Change logs:

2016-11-22

  • added more settings.

v1.3.3 (2014-10-24)

  • Now you can add tags clicking away from the $type_zone.
  • Bugs fixed.

v1.3.1 (2014-04-29)

v1.2.5 (2014-04-10)

  • update.

v1.1 (2014-03-27)

  • update.

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