Bootstrap Tags Input

Classname for the tags, or a function returning a classname

$('input').tagsinput({
  tagClass: 'big'
});

$('input').tagsinput({
  tagClass: function(item) {
    return (item.length > 10 ? 'big' : 'small');
  }
});

When adding objects as tags, itemValue must be set to the name of the property containing the item's value, or a function returning an item's value.

$('input').tagsinput({
    itemValue: 'id'
});

$('input').tagsinput({
  itemValue: function(item) {
    return item.id;
  }
});

When adding objects as tags, you can set itemText to the name of the property of item to use for a its tag's text. You may also provide a function which returns an item's value. When this options is not set, the value of itemValue will be used.

$('input').tagsinput({
  itemText: 'label'
});

$('input').tagsinput({
  itemText: function(item) {
    return item.label;
  }
});

Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma)

$('input').tagsinput({
  confirmKeys: [13, 44]
});

When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element.

$('input').tagsinput({
  maxTags: 3
});

Defines the maximum length of a single tag. (default: undefined)

$('input').tagsinput({
  maxChars: 8
});

When true, automatically removes all whitespace around tags. (default: false)

$('input').tagsinput({
  trimValue: true
});

When true, the same tag can be added multiple times. (default: false)

$('input').tagsinput({
  allowDuplicates: true
});

Allow creating tags which are not returned by typeahead's source (default: true)

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});

Object containing typeahead specific options

An array (or function returning a promise or array), which will be used as source for a typeahead.

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
});

$('input').tagsinput({
  typeahead: {
    source: function(query) {
      return $.get('http://someservice.com');
    }
  }
});

Function invoked when trying to add an item which allready exists. By default, the existing tag hides and fades in.

$('input').tagsinput({
  onTagExists: function(item, $tag) {
    $tag.hide.fadeIn();
  }
});

Adds a tag

$('input').tagsinput('add', 'some tag');

$('input').tagsinput('add', { id: 1, text: 'some tag' });

$('input').tagsinput('add', 'some tag', {preventPost: true});

                  
$('#tags-input').on('beforeItemAdd', function(event) {
   var tag = event.item;
   // Do some processing here

   if (!event.options || !event.options.preventPost) {
      $.ajax('/ajax-url', ajaxData, function(response) {
         if (response.failure) {
            // Remove the tag since there was a failure
            // "preventPost" here will stop this ajax call from running when the tag is removed
            $('#tags-input').tagsinput('remove', tag, {preventPost: true});
         }
      });
   }
});
                  
                

Removes a tag

$('input').tagsinput('remove', 'some tag');

$('input').tagsinput('remove', { id: 1, text: 'some tag' });

$('input').tagsinput('remove', 'some tag', {preventPost: true});

                  
$('#tags-input').on('beforeItemRemove', function(event) {
   var tag = event.item;
   // Do some processing here

   if (!event.options || !event.options.preventPost) {
      $.ajax('/ajax-url', ajaxData, function(response) {
         if (response.failure) {
            // Re-add the tag since there was a failure
            // "preventPost" here will stop this ajax call from running when the tag is added
            $('#tags-input').tagsinput('add', tag, {preventPost: true});
         }
      });
   }
});
                  
                

Removes all tags

$('input').tagsinput('removeAll');

Removes all tags

$('input').tagsinput('removeAll');

Sets focus in the tagsinput

$('input').tagsinput('focus');

Returns the tagsinput's internal <input />, which is used for adding tags. You could use this to add your own typeahead behaviour for example.

var $elt = $('input').tagsinput('input');

Refreshes the tags input UI. This might be usefull when you're adding objects as tags. When an object's text changes, you'll have to refresh to update the matching tag's text.

$('input').tagsinput('refresh');

Removes tagsinput behaviour

$('input').tagsinput('destroy');

$('input').on('beforeItemAdd', function(event) {
  // event.item: contains the item
  // event.cancel: set to true to prevent the item getting added
});

$('input').on('itemAdded', function(event) {
  // event.item: contains the item
});

$('input').on('beforeItemRemove', function(event) {
  // event.item: contains the item
  // event.cancel: set to true to prevent the item getting removed
});

$('input').on('itemRemoved', function(event) {
  // event.item: contains the item
});