Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input

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)

• Updated uglify to fix source maps generation issue

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.