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.
imageTag (bool, defaults to false): Optionally adds an image to the output.
imageTagUrl (string, defaults to an empty string): The url of the optional image.
continuousOutputBuild (bool, defaults to false): Set to true to continuously append data to the hidden field that is to be posted with the form.

Methods

These are the methods available.

$(object).tagEditorGetTags(): Returns the same value as the posted form would have.
$(object).tagEditorResetTags(): Reset the tags in the tag editor.
$(object).tagEditorAddTag('string'): Adds a tag to the list.

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.