

$("#myTags").tagit("createTag", "brand-new-tag") preprocessTag(function, Callback) The additionalClass parameter is an optional way to add classes to the tag element. ( 'div.foo' ) If no elements match the provided selector, the new jQuery object is 'empty' that is, it. $("#myTags").tagit("assignedTags") createTag(tagLabel, additionalClass)Īdds new tag to the list. In the first formulation listed above, jQuery () which can also be written as () searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements: 1.

Returns an array of the text values of all the tags currently in the widget. This can only be called if tagLimit is set. Receives a null event,Īnd an object with the property duringInitialization. $("#myTags").tagit() onTagLimitExceeded (function, Callback)Ĭalled when attempting to create a tag while the tag limit has already been reached. If you're using PHP, you may want to use something like itemName for this option's value. Tag-it accepts several options to customize its behaviour: fieldName (String)Įach tag's hidden input field will have this name. The old ZenDesk-like theme is included as an optional CSS file ( ). Tag-it is as easily themeable as any jQuery UI widget, using your own theme made with Themeroller, or one of the jQuery UI premade themes. There are several other possible configurations and ways to instantiate the widget, including one that uses a single comma-delimited input field rather than one per tag, so see the Options documentation below as well as the examples page (and its source) which demonstrates most of them, as well as the Tag-it Zendesk theme used in the screenshot above. This will turn the list into a tag-it widget. If more than one match is found, a small indicator will appear underneath the. This script is setup to have available tags the user can choose from be set by an array called 'availableTags.' What I need to do is do an jQuery ajax call to a script that will contain a list of tags that come from a MySQL database which match the user input. The jQuery Tagit Plugin transforms an html unordered list into a unique. Now, let's attach it to an existing box: I am using a jQuery tagit pluggin (code and documentation is here). Here we use the Flick theme as an example:

The plugin requires either a jQuery UI theme or a Tag-it theme to be present, as well as its own included base CSS file ( ). The Effects Core with "Blind" and "Highlight" Effect components are optional, but used if available. If you're using a custom jQuery UI build, it must contain the Core, Widget, Position, and Autocomplete components. Usageįirst, load jQuery (v1.4 or greater), jQuery UI (v1.8 or greater), and the plugin: Tag-it is a simple and configurable tag editing widget with autocomplete support.Ĭheck the examples.html for several demos and the prototype.js file for a JavaScript prototype with all options and events.
