Stylish & Customizable jQuery Tags Input Plugin - taggingJS
File Size: | 240 KB |
---|---|
Views Total: | 4595 |
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:
- 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.