Form-ready, Delicious style tagging made easy.

Example 1 - Creating a basic Taggle

This example is as simple as it gets. Duplicate tags are prevented by default. Use your left and right arrows to navigate between tags. You can also delete tags by pressing backspace or hovering and clicking with your mouse.

HTML:

< div id = " example1 " > </ div >

JavaScript:

new Taggle ( 'example1' ) ;

Example 2 - Prefilled tags

It’s easy to prepopulate the text field as well. Just pass an array of tags as displayed below.

HTML:

< div id = " example2 " > </ div >

JavaScript:

new Taggle ( 'example2' , { tags : [ 'These' , 'are' , 'prefilled' , 'tags' ] } ) ;

Example 3 - Duplicate tag alert

This example takes advantage of how much CSS control Taggle.js allows you to have. Specify your own duplicate CSS class by using the duplicateTagClass option. Try entering one of the already existing tags to see a subtle alert notifying you of the tag.

Note: the bounce animation happens as a result of the css class being added. Not javascript. Therefore you will not see the animation in IE9 and below.

HTML:

< div id = " example3 " > </ div >

JavaScript:

new Taggle ( 'example3' , { tags : [ 'Try' , 'entering' , 'one' , 'of' , 'these' , 'tags' ] , duplicateTagClass : 'bounce' } ) ;

Example 4 - Autocomplete

Taggle.js just provides the basic functionality to add tags to a field but it also provides a basic API so you can wrap it for additional functionality with other libraries such as jQueryUI Autocomplete. Same HTML. Just a little bit more javascript code.

HTML:

< div id = " example4 " > </ div >

JavaScript:

var example4 = new Taggle ( 'example4' ) ; var container = example4 . getContainer ( ) ; var input = example4 . getInput ( ) ; $ ( input ) . autocomplete ( { source : arrayOfValues , appendTo : container , position : { at : "left bottom" , of : container } , select : function ( event , data ) { event . preventDefault ( ) ; if ( event . which === 1 ) { example4 . add ( data . item . value ) ; } } } ) ;

Example 5 - onBeforeTagAdd/onTagAdd & onBeforeTagRemove/onTagRemove

Want to hook into before a tag is added or removed? Okay. Want to call a callback function after a tag has been added or removed? Fine.

I’m using innerHTML for simplicity however you should look into innerText or textContent depending on what browser you’re supporting.

HTML:

< div id = " example5 " > </ div > < p id = " example5-event " > </ p >

JavaScript:

var text = document . getElementById ( 'example5-event' ) ; new Taggle ( 'example5' , { onBeforeTagAdd : function ( event , tag ) { return confirm ( 'You really wanna add ' + tag + '?' ) ; } , onTagAdd : function ( event , tag ) { text . innerHTML = 'You just added ' + tag ; } , onBeforeTagRemove : function ( event , tag ) { return confirm ( 'You really wanna remove ' + tag + '?' ) ; } , onTagRemove : function ( event , tag ) { text . innerHTML = 'You just removed ' + tag ; } } ) ;

Example 6 - add / remove

You can programatically add and remove tags as well.

HTML:

< div id = " example6 " > </ div >

JavaScript:

var taggle = new Taggle ( 'example6' , { allowDuplicates : true } ) ; taggle . add ( 'one' ) ; taggle . add ( [ 'two' , 'three' , 'four' , 'four' , 'five' , 'five' ] ) ; taggle . remove ( 'five' ) ; taggle . remove ( 'four' , true ) ;

Example 7a - Allowed tags

Sometimes you’ll want to restrict the users to adding only certain tags.

HTML:

< div id = " example7a " > </ div >

JavaScript:

var taggle = new Taggle ( 'example7a' , { placeholder : 'Type your favorite type of juice... (hint: orange)' , allowDuplicates : true , allowedTags : [ 'orange' ] } ) ;

Example 7b - Disallowed tags

Conversely, you’ll want to restrict the users from adding certain tags.

HTML:

< div id = " example7b " > </ div >

JavaScript:

var taggle = new Taggle ( 'example7b' , { placeholder : 'Type your favorite type of juice... (hint: apple)' , allowDuplicates : true , disallowedTags : [ 'apple' ] } ) ;

Misc - Tags around the web

Tag fields can be really useful because it makes it easy for your users to provide the type of data values you need without having to worry about if they submitted values with trailing spaces, extra commas, etc.

As you can see below, it’s easy to style Taggle.js with just a little bit of css.

Delicious

Stack Overflow

Options

additionalTagClasses: [String=''] By default a class of taggle will be assigned to each tag. If you need more, add them in one string separated by spaces. allowDuplicates: [Boolean=false] Set to true if you want to allow duplicate tags to be entered in the taggle field. preserveCase: [Boolean=false] Set to true if you want to allow tags to retain case as entered in the taggle field (lowercased by default). saveOnBlur: [Boolean=false] Allow the saving of a tag on blur, rather than it being removed by default. clearOnBlur: [Boolean=true] Clear the input element on blur if there is a text value. duplicateTagClass: [String=''] The class name that will be set onto duplicate tag. containerFocusClass: [String='active'] This will be the class added to the taggle field div when focused. focusInputOnContainerClick: [Boolean=true] If true then input will be focused when container receives a click event. hiddenInputName: [String='taggles[]'] Since a hidden input is appended for each tag added, you might need a name for them when submitting to the server. placeholder: [String='Enter tags...'] A placeholder. submitKeys: [188, 9, 13] Keycodes that will add a tag. Comma, Tab, and Enter are the recommended and default keyCodes. tabIndex: [Number=1] If your taggle field is within a form, it might be useful to specify a tabIndex so that a user can still tab through form fields like normal. tags: [Array=[]] These will be the tags that should be preloaded in the taggle field when the plugin loads. delimeter: [','] The default delimeter character to split tags on. attachTagId: [Boolean=false] Add an ID to each of the tags that will be available in onTagAdd, onBeforeTagRemove, & onTagRemove. maxTags: [Number=null] Limit the number of tags that can be added. allowedTags: [Array=[]] Tags that the user will be restricted to. inputFormatter(inputElement) Function hook called with the to-be-added input DOM element. tagFormatter(element) Hook fired before the tag li element is appended to the DOM. This gives the author a chance to edit the list item before it is added. Must return an li element. onBeforeTagAdd(event, tag) Hook fired before a tag is added. Provides the event and tag text. Return false to prevent the tag from being added. onBeforeTagRemove(event, tag [, callback]) Hook fired before a tag is removed. Provides the event and tag text. Return a falsy value to prevent the tag from being removed. The callback argument can be called to remove the tag. onTagAdd(event, tag) Callback fired whenever a tag is added. Provides the event and tag text. onTagRemove(event, tag) Callback fired whenever a tag is removed. Provides the event and tag text.