Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input

Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input
File Size: 1.11 MB
Views Total:
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:

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

Change logs:

v0.8.0 (2016-02-17)

  • Add possibility skip "change" event after "add", "remove", "removeAll"

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.