Active Development?
This plugin is no longer under active development, I will continue to merge in pull requests as long as they conform to the Note for contributers/pull requesters below, but do not have the time to activly develop the plugin. If someone wishes to take over the plugin create an issue in the tracker and I will discuss with you there. For anyone looking to use this plugin I strongly suggest checkout out the awesome Select2 by Igor Vaynberg. Which has all the features of Tagit and then some!
Note for contributors/pull requesters
We welcome all bug fixes and additions to tagit, it is a community project after all, however we have one rule for commits:
- All edits must be applied to both tagit.js and tagit-themeroller.js no pull requests will be accepted unless this is done to ensure the scripts function equally.
It depends on jQuery 1.7.2. and jQuery-ui 1.8 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 and has some awesome features like sortable tags.
Quicklinks
Features
- Convenient way for users to enter a list of items
- Fully integrated with jQuery ui auto complete
- Automatically adds current input as tag if input loses focus
- Easy to use public methods
- Easy to theme (single css file)
- Customizable trigger keys
- Backspace on empty input deletes previous tag
- Ability to provide initial tags on creation though options
- Ability to provide initial tags on creation via list items
- Option to toggle usage of a hidden select so the tags can be sent using a normal form!
- Ability to re-arrange tags by drag and drop!
- Optional ThemeRoller compatibility!
- Fully HTML5 Data-attributes compliant!
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 |
| maxLength | Int | 1 | The maximum length a tag is allowed to be |
| 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. |
| placeholder | String | Enter tags... | The placeholder of the tagit field. It can be any string. |
| inputWidth | integer | 150 | The length of the input. It can be adjusted based on the palceholder. |
| 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 dragable. If 'handle' a handle is rendered and the tag is only dragable using the handle. |
| allowDuplicates | Bool | False | Allow Duplicate tags if set to true |
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. |
.tagit("remove", 'tag', 12) |
Bool | Removes a tag by its label or value. |
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License with original attribution remaining with Matthew Hailwood and http://jquery.webspirited.com.