Tag Editor - A powerful and lightweight tag editor plugin

Download   Demo

Tag Editor is a powerful and lightweight tag editor plugin for jQuery. It is Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone into CSS/layout bugs. No dependencies except the jQuery library.

Features

• Lightweight: 9.3 kB of JavaScript – less than 3.4 kB gzipped


• Edit in place tags


• Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC


• Optional jQuery UI sortable


• Optional jQuery UI autocomplete


• Copy-paste or delete multiple selected tags


• Duplicate tags check


• Custom delimiter/s


• Placeholder


• Custom style for faulty tags


• Public methods for reading, adding and removing tags + destroy function


• Callbacks


• Graceful degradation if JavaScript is disabled

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="jquery.tag-editor.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.tag-editor.js"></script>

2. HTML

<textarea id="demo1"></textarea>

3. JAVASCRIPT

$('#demo1').tagEditor( initialTags: ['Hello', 'World', 'Example', 'Tags'], delimiter: ', ', placeholder: 'Enter tags ...' ).css('display', 'block').attr('readonly', true);

4. OPTIONS

Property	Default	Description
initialTags	[]	Initial tags as an array of strings.
maxLength	50	maxlength attribute of the tag input field.
delimiter	‘,;’	Required string of delimiters – characters for separating tags. The first character is used as default delimiter in the (hidden) original field.
placeholder	”	Placeholder text for empty tag editor.
forceLowercase	true	Lowercase all tags.
clickDelete	false	Delete tags on right click and on Ctrl+click.
sortable	true	If jQuery UI sortable is available and this option is set to true, tags are sortable by drag and drop.
autocomplete	null	jQuery UI autocomplete options as key/value pairs object. If provided, jQuery UI autocomplete must be loaded additionally.

5. CALLBACKS

onChange (field, editor, tags)	Callback that fires after tags are changed. field is the (hidden) original field, editor is the editor’s DOM element (an <ul> list of tag elements), and tags contains the list of current tags.
beforeTagSave (field, editor, tags, tag, val)	Callback that fires before a tag is saved. field is the (hidden) original field, editor is the editor’s DOM element. tags contains the list of current tags, tag is the value that is about to get overwritten (empty string, unless an existing tag gets changed), and val is the new value to be saved.
beforeTagDelete (field, editor, tags, val)	Callback that fires before a tag is deleted. field is the (hidden) original field, editor is the editor’s DOM element. tags contains the list of current tags, val is the tag that is about to get deleted. Return false to prevent this action.

6. METHODS

getTags	Returns a list of objects in the following format: [ field: selected input/textarea, editor: editor instance for field, tags: current tags ]
addTag(val, next)	Adds val as a new tag. Set next to ‘blur’ if focus should not be set automatically into an empty, new tag after this action.
removeTag(val, next)	Removes val as tag. Set next to ‘blur’ if focus should not be set automatically into an empty, new tag after this action.
destroy	Removes the tag editor instance an restores visibility of the original text field or textarea.

Tag Editor - A powerful and lightweight tag editor plugin