jquery-tagit

Fork of hailwood/jQuery-Tagit

Install with npm:

npm install jquery-tagit

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
> * Demo
> * Features
> * Options
> * Methods

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.