Options

$('#selector').tagin({
    // tag delimiter
    delimiter: ' ',

    // create new tag when delimiter key is pressed
    delimiterCreateTag: true,

    // if false only tags can be inserted
    allowTextInput: false,

    // if false only tags from autocomplete can be inserted
    allowNewTags: true,

    // allowed characters of tag (no restrictions by default)
    // example for alphanumeric values: /[-a-zA-Z0-9]/g
    allowedChars: null,

    // function for transforming tag value, it can be:
    // - name of String method (like 'toLowerCase' 'toUpperCase')
    // - or regular function
    transformFunction: null,

    // array of tags for autocomplete
    availableTags: null,

    // function for autocomplete tagSource(term, callback)
    tagSource: null,

    // options for autocomplete
    // see https://jqueryui.com/demos/autocomplete/#options
    autocomplete: {
        autoFocus: true
    },

    // do animation when removing tag
    animate: true,
    
    // name of the method to access input value
    // set to 'text' for content editable mode
    accessor: 'val'
});

Contenteditable mode

By default the user typing is handled by regular <input> elements. Another way to enable typing is to set contenteditable="true" attribute to an regular element. Contenteditable mode has some advantages over regular inputs. Elements get automatically resized by browser and there is no need for complex custom code. And when you have a lot of tag inputs in your page, you can prerender them on serverside and initialize lazily which is faster.

Contenteditable mode is enabled by setting accessor option to text. It is not supported by IE 6 and 7.

Methods

createTag(string [, options])
    $('#selector').tagin('createTag', 'abc');
    $('#selector').tagin('createTag', 'abc', {silent: true}); // do not fire change events

removeTag(string or number [, options])
    $('#selector').tagin('removeTag', 'abc');
    $('#selector').tagin('removeTag', 0); // remove first tag

clear([options]) // remove all tags and inputs
    $('#selector').tagin('clear');

tags(array [, options]) // set tags
    $('#selector').tagin('tags', ['foo', 'bar']);

tags // get assigned tags
    var assigned = $('#selector').tagin('tags');
    // tags will be ['foo', 'bar']

inputs(array [, options]) // set input values
    $('#selector').tagin('inputs', ['text']);

inputs // get input values
    $('#selector').tagin('inputs');

focus([options]) // focus input
    $('#selector').tagin('focus');

blur([options]) // blur input
    $('#selector').tagin('blur');

To suppress firing events when changing state, pass {silent: true} as options argument.

Events

change
tag-removed
tag-created
focus
blur
keydown
keypress
keyup

Customization

Plugin consists of two main classes: TagComponent and TagInput. Main component TagComponent contains array of TagInputs. TagInput is the basic block and consists of tag label and <input> element.

To customize how elements are represented and handled in DOM, override component methods domCreate, domAdd, domRemove and TagInput.domCreate.

// globally for all instances:
$.ui.tagin.prototype.domCreate = function() {
    // ... custom code ...
};

// for one specific instance:
$('#selector').data('tagin').domCreate = function() {
    // ... custom code ...
};

// overriding TagInput
$.ui.tagin.prototype.TagInput.prototype.domCreate = function() {
    // ... custom code ...
};