jQuery Plugin tagedit - Tageditor

editing tags from a database the easy way

Demo

more demos here

Download

Get the latest version from the Github project page.

Overview

The jQuery Plugin tagedit by Oliver Albrecht offers an easy way to add, edit and delete lists of keywords.
Keywords can be brought to the user with a autocomplete list.

This plugin was inspired by the jQuery Plugin Tag it! created by Levy Carneiro Jr.

Example (screencast)

Installation / Setup

Create a server side script for the autocompletion list. See the jQuery UI - Autocomplete Documention for more information.
Inside your html, create a <form> element, containing at least one <input> element. Example:


            <form action="yoururlgoeshere.php" method="post">

              <input type="text" name="tag[]" value="" class="tag"/>

            </form>

You need the following files included in your <head> or <body>:

latest jquery >= 1.4 get it here
latest jquery UI >= 1.8 get it here
tagedit.jquery.js get it here
tagedit.jquery.css get it here

Initialize the plugin on the created <input> element:


            $('input.tag').tagedit({

              autocompleteURL: 'path/to/your/server' 

            });

Configuration

autocompleteURL: The url for the autocompletion listdefault: ''
deleteEmptyItems: Deletes items with empty valuedefault: true
deletedPostfix: will be put to the Items that are marked as deletedefault: '-d'
addedPostfix: will be put to the Items that are choosem from the databasedefault: '-a'
additionalListClass: put a classname here if the wrapper ul shoud receive a special classdefault: ''
allowEdit: Switch on/off edit entriesdefault: true
allowDelete: Switch on/off deletion of entries. Will be ignored if allowEdit = falsedefault: true
allowAdd: switch on/off the creation of new entriesdefault: true
direction: Sets the writing direction for Outputs and Inputsdefault: 'ltr'
animSpeed: Sets the animation speed for effectsdefault: 500
autocompleteOptions: Setting Options for the jquery UI Autocomplete (http://jqueryui.com/demos/autocomplete/)default: {}
breakKeyCodes: Sets the characters to break on to parse the tagsdefault: [ 13, 44 ] (return, comma)
checkNewEntriesCaseSensitive: If there is a new Entry, it is checked against the autocompletion list. This Flag controlls if the check is (in-)casesensitivedefault: false
texts: some texts default: removeLinkTitle: 'Remove from list.',
saveEditLinkTitle: 'Save changes.',
deleteLinkTitle: 'Delete this tag from database.',
deleteConfirmation: 'Are you sure to delete this entry?',
deletedElementTitle: 'This Element will be deleted.',
breakEditLinkTitle: 'Cancel'

Bugs or feature requests

Please report any bugs or feature requests on github:
https://github.com/webworka/Tagedit

About

I'm Oliver Albrecht, freelancer from Berlin, Germany.
My website: http://webwork-albrecht.de
Twitter: @webworka
Google+: 103236959373765468473