Powerful And Lightweight jQuery Tag Management Plugin - tagEditor

tagEditor is a simple yet powerful jQuery plugin that converts a text input into a tag editor with support for jQuery UI sortable & autocomplete, cursor navigation and callbacks.

How to use it:

1. Include the jQuery library and jQuery UI (Optional) in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Include the both jquery.tag-editor.css and jquery.tag-editor.js after jQuery library.

<script src="jquery.tag-editor.js"></script>
<link rel="stylesheet" href="jquery.tag-editor.css">

3. Create a text field (input or textarea) for the tag editor. For textarea, the existing text will be used as initial tags.

<textarea id="demo">jQuery,tags,autocomplete</textarea>

4. Initialize the plugin on the text field with default settings.

// assign tag editor to textarea
$('textarea').tagEditor();

// with jQuery UI autocomplete
$('textarea').tagEditor({ autocomplete: { 'source': '/url/', minLength: 3 } });

5. Available options and callbacks.

• initialTags: []: Initial tags as an array of strings.
• maxLength: 50: maxlength attribute of the tag input field.
• maxTags: 0: Maximum number of allowed tags.
• animateDelete: 175: Animate duration for deletion of tags in milliseconds. Set to 0 for non-animated removal.
• removeDuplicates: true: Automatically remove duplicate tags.
• 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: Query UI sortable
• autocomplete: null: options dict for jQuery UI autocomplete
• onChange (field, editor, tags): oCallback 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. Public 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.

Change logs:

2017-05-06

• Fixed bug: Delete multiple tags via selection not working with certain parent cotainer structure.

2016-01-30

• Fixed: tagEditor was blocking key events on other input and textarea elements on page.

2016-01-20

• Fixed: If maxTags is set to 1, it allows 2 tags if you press Enter key

2015-12-02

• Fixed Tag editor fails to handle HTML operator chars.

2015-10-14

• Fixed: Double quotes tags breaks plugin

2015-08-12

• Escape HTML special characters.

2015-07-14

• Allow beforeTagSave() to return `false` for discarding certain tag values.

2015-07-03

• Fixed cursor jumping to end of tag list after pressing enter.

2015-07-02

• Fixed 'TypeError'

2015-05-25

• Added maxTags, removeDuplicates, and animateDelete options.

2015-04-21

• Fix issue with overriding select event

2015-04-06

• Fixed Auto-close tag after selecting autocomplete suggestion by mouse click.

2015-01-21

• Fixed tabindex navigation.

2015-01-16

• Make use of tabindex for form navigation.

2015-01-09

• Use beforeTagSave return value for overwriting saved tag.
• Fixed an issue when entering or modifying tag before another tag, enter opens next tag

2015-01-04

• FIx for IE8. 

2014-12-20

• Fixed input autogrow in autocomplete

2014-12-18

• Optimized internal input autogrow function.

2014-11-28

• Fixed CSS display bug for IE11.

2014-11-26

• Removing accursoft's caret plugin from tagEditor source (and adding caret as a dependency).

2014-10-22

• Fixed removal of tags on delete/backspace keypress

2014-10-01

• Added logic for selected field to be .tag-editor only.

2014-09-25

• stop aco.select form calling itself

2014-09-14

• v1.0.3

2014-07-28

• Fixed restoring placeholder after calling addTags.

 

---

This awesome jQuery plugin is developed by Pixabay. For more Advanced Usages, please check the demo page or visit the official website.