Fork me on GitHub

jQuery Tagit Documentation Page

The jQuery Tagit plugin transforms an html unordered list into a unique tagging plugin.
Why unique? Because jQuery Tagit uses jQuery Ui's auto-complete plugin to supply suggestions to users as they type.

Browser Support

Features

The Minimum Code Required

$('#tags').tagit();

Options

Name Type Default Note
tagSource String, Array, Callback [] This option maps directly to the jQuery UI Autocomplete source option
triggerKeys Array ['enter', 'space', 'comma', 'tab'] An array containing all or any of the default options.
These are the keys that will trigger a tag completion
allowNewTags Bool true Allow tags that do not exist in tagSource to be entered?
initialTags Array [] An array containing tags to pre-populate the field with
minLength Int 1 The minimum length before a triggerKey will create a tag
select Bool false Maintain a hidden select in place for form submissions
To name the select simply give your UL a name attribute!
Don't forget to include [ and ] if your language (e.g. PHP) requires them!
tagsChanged Callback function(tagValue, action, element) Callback on changed tags:
tagValue: string
action: string - either 'added', 'popped', 'moved' or 'reset'
element: object - reference to the added LI element
caseSensitive Bool false The check for existing tags is case sensitive. If false the words "Foo" and "foo" considered the same
highlightOnExistColor String #0F0 If the user tries to add a tag, that already exists, the existing tag will run a highlight effect using the defined background color. If null, the highlight effect is turned off.
maxLength Int unlimited The maximum allowable length of a tag.
If omitted, tags of unlimited length are allowed.
maxTags Int unlimited The maximum number of tags that the user can enter.
If omitted, an unlimited number of tags are allowed.
sortable Bool, String false Allows the user to re-order the tags using drag and drop.
If true the whole tag is draggable, if 'handle' a handle is
rendered and the tag is only draggable using the handle.

Methods

Name Return Note
.tagit("destroy") null Returns the ul to its original state
.tagit("tags") Array Returns an array of objects about all the tags.
.tagit("reset") null Resets the tags list to the initial value
.tagit("fill", [{label: 'tag', value: 12}, {label: 'stuff', value: 13}]) null Empties the tags and fills the plugin with the provided tags.
.tagit("add", {label: 'tag', value: 12}) Bool Adds a tag to the plugin.

© Content and Design Matthew Hailwood 2012