jQuery Tagit is a plugin for jQuery which pro a form element to input tags. It offers auto-completion for them and integrates well into bootstrap.

• Check it out on github
• |
• Download

Basic functionality

Use a ul element to embed the tag input to. Add the fake-input class (if you use the provided css files) to make the element look like an input. Make the element focusable by adding a tabindex attribute.

Result

Auto-completion

Use the tags option to provide tags for auto-completion

Result

Serialization

For each tag a hidden input is created whos name defaults to tag and can be changed by providing a field option to the tagit constructor.

Prepopulating tag inputs

Add li child elements to a tagit ul to make them become initial elements of the tag input

Result

Programmatically controlling the tag input

The plugin makes the methods addTag(name), removeTag(name) and getTags() available via the tagit method.

Result