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.


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.


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.


Download

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