Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input
File Size: | 186 KB |
---|---|
Views Total: | 24889 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Bootstrap Tags Input is a jQuery plugin that allows you to add, remove, and categorize tags with Twitter Bootstrap user interface.
NEW! Bootstrap 4 version is now available.
See also:
- Versatile jQuery Tags Input Plugin - Tag Handler
- jQuery Tags Manager with Twitter Bootstrap - tagmanager
- jQuery Tag & Token Input Plugin For Bootstrap - Bootstrap Tokenfield
Basic Usage:
1. Include jQuery library and jQuery Bootstrap Tags Input on the web page
<script src="assets/jquery.min.js"></script> <script src="assets/bootstrap-tagsinput.js"></script> <link rel="stylesheet" href="assets/bootstrap-tagsinput.css">
2. Include Twitter Bootstrap on the web page
<link rel="stylesheet" href="assets/bootstrap-2.3.2/css/bootstrap.min.css"> <script src="assets/bootstrap-2.3.2/js/bootstrap.min.js"></script>
3. Create a input field for the tags manager
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
4. Done. You can pass the options to the plugin via JS option objects.
tagClass: function(item) { return 'label label-info'; }, focusClass: 'focus', itemValue: function(item) { return item ? item.toString() : item; }, itemText: function(item) { return this.itemValue(item); }, itemTitle: function(item) { return null; }, freeInput: true, addOnBlur: true, maxTags: undefined, maxChars: undefined, confirmKeys: [13, 44], delimiter: ',', delimiterRegex: null, cancelConfirmKeysOnEmpty: false, onTagExists: function(item, $tag) { $tag.hide().fadeIn(); }, trimValue: false, allowDuplicates: false, triggerChange: true
Changelog:
v0.8.0 (2022-04-11)
- New version
v0.7.1 (2015-11-11)
- allowDuplicates not working
- tag text appears when typeahead input looses focus
- Remove duplicate method removeAll in manual
v0.7.0 (2015-11-09)
- .tt-menu etc. styles should be included in bootstrap-tagsinput.css by default
- Comma character carried over to new tag input when used as separator
- Emails in multi select are being duplicated
- The 'itemAdded' Event run on Load the Page!
v0.6.1 (2015-11-03)
v0.5.1 (2015-03-26)
- update.
v0.4.2 (2014-08-01)
- Fix typeahead when using Bootstrap 3
v0.3.14 (2014-07-31)
- Renamed itemKey to valueKey
v0.3.14 (2014-07-27)
- Bugs fixed.
v0.3.10 (2014-07-17)
- update.
v0.3.9 (2013-10-15)
- Fixed Type ahead stops when entering second character
v0.3.8 (2013-10-15)
- Add support for placeholder
- ie 8 compatibility, replace indexOf method
v0.3.7 (2013-10-15)
- fixed: flash when duplicate is entered
v0.3.6 (2013-10-06)
- Only add existing value as tags when using strings as tags
- Implemented confirmKeys option
This awesome jQuery plugin is developed by bootstrap-tagsinput. For more Advanced Usages, please check the demo page or visit the official website.