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>:

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