Stylish & Customizable jQuery Tags Input Plugin - taggingJS

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:

• Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input
• jQuery Tags Manager with Twitter Bootstrap - tagmanager
• Simple jQuery Tagging & Tokenizer Input with Autocomplete - Tokens
• jQuery Tag & Token Input Plugin For Bootstrap - Bootstrap Tokenfield

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": "×": 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)

• update.

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.