jQuery Tag Editor

About

A simple jQuery-plugin for transforming a textbox into a Wordpress-style tag editor.

Sample code

<script type="text/javascript" src="jquery.tag.editor.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#Tags").tagEditor(
        {
            items: ["First tag", "Second tag"],
            confirmRemoval: true
        });
    });
</script>

Options

These are the options available to customize the tag editor.

separator (char, defaults to comma (","))

The char used as separator for tags.

items (string array, defaults to an empty array)

Any items that is to be added at the start.

className (string, defaults to tagEditor)

Classname used on the tag list.

confirmRemoval (bool, defaults to false)

Set to true to have the user confirm removal of a tag.

confirmRemovalText (string, defaults to "Do you really wan to remove the tag?")

Set to a new string that will be displayed in the confirmation-popup when removing a tag.

completeOnSeparator (bool, defaults to false)

Set to true to parse tags as soon as a separator is added.

completeOnBlur (bool, defaults to false)

Set to true to parse tags as soon as the editor loses focus.

initialParse (bool, defaults to true)

Set to false to stop the editor from parsing text that is already in the textbox when enabled.

Methods

These are the methods available. These require a reference to the tag editor.

getTags()

Returns the same value as the posted form would have.

Demo 1

Write your tags separated by commas and hit return to add them to the tag list.

Tags:

Demo 2

Write your tags separated by spaces and they will automaticly be added to the tag list. If this editor loses focus it will also add the current text as a tag.

Tags:

Demo 3

Write your tags separated by commas. The values in this editor is filled from the initial value of the textbox and it also has a custom text when removing tags.

Tags:

Download

All releases of jQuery Tag Editor can be found at http://plugins.jquery.com/project/jQueryTagEditor.