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, // See jQuery UI documentaton for options
    appendTo: container,
    position: { at: "left bottom", of: container },
    select: function(event, data) {
        event.preventDefault();
        //Add the tag if user clicks
        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');

// Make sure to return true or false in onBeforeTagAdd and onBeforeTagRemove
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