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. (default: undefined)

$('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
});

Defines the maximum length of a single tag.

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

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' });

Removes a tag

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

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

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
});