Flexible jQuery Tags Management Plugin - tagtacular

File Size: 3.19 MB
Views Total: 1428
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible jQuery Tags Management Plugin - tagtacular

jQuery tagtacular is a Flexible and easy-to-use jQuery plugin that makes it easy to add, edit, remove tags with flexible customization options.


  • Textlike tags Management
  • Limit to Existing Tags
  • Custom Validator and Commit Functions
  • Custom Tags

See also:

Basic Usage:

1. Include jQuery library and jQuery UI library on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" media="all" />

2. Include jQuery tagtacular plugin on the page

<link href="css/tagtacular.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tagtacular.js"></script>

3. Create a container for the Tags Management

<div class="tagtacular_textlike" id="tagtacular_1"></div>

4. The javascript

var tags1 = $('#tagtacular_1').tagtacular({
entityId: 101,
entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'],
systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto'],
configTagSeparator: ', ',
configShowAddButton: false,
configShowSwitchButton: false,
configDeleteLastOnEmptyKeys: [8],
configSortTags: false

5. All available settings.

commitAddTag:                  doNothing,
commitRemoveTag:               doNothing,
configAddOnSwitch:             true,
configAddButtonText:           'Add',
configAllowedToEdit:           true,
configAutocomplete:            true,
configAutocompletePrune:       true,
configCaseInsensitive:         true,
configDeleteSymbol:            'X',
configDeleteLastOnEmptyKeys:   [],
configDelimiters:              [13,44],
configEditTrayFirst:           false,
configFlashFailureHideAfter:   5,
configFlashSuccessHideAfter:   5,
configFormatTagNamesOnInit:    false,
configLimitToExisting:         false,
configMinimumTagLength:        1,
configMaximumTagLength:        32,
configPlaceholderText:         false,
configRenderFlashMessageSpan:  true,
configSelectBox:               false,
configShowAddButton:           true,
configShowSwitchButton:        true,
configSortTags:                true,
configSwitchButtonTextInEdit:  'Done',
configSwitchButtonTextInView:  'Edit',
configTagSeparator:            '',
entityId:                      null,
entityType:                    null,
entityTags:                    [],
getAddButtonHtml:              defaultGetAddButtonHtml, 
getLayoutHtml:                 defaultGetLayoutHtml,
getSwitchButtonHtml:           defaultGetSwitchButtonHtml, 
getTagHtml:                    defaultGetTagHtml,
flashFailure:                  defaultFlashFailure,
flashSuccess:                  defaultFlashSuccess,
formatTagName:                 doNothing,
messageAddTagSuccess:          'tag added',
messageAddTagAlreadyExists:    'tag is already assigned',
messageEmptySelectBoxFailure:  'you must select a tag before adding it',
messageRemoveTagSuccess:       'tag removed',
messageTagNameInvalid:         'invalid tag name: tag names can only include letters, numbers, underscores, hyphens, and spaces',
messageTagTooLong:             'tag name too long, maximum length of [configMaximumTagLength]',
messageTagTooShort:            'tag name too short, minimum length of [configMinimumTagLength]',
mode:                          'edit',
postDrawEditTray:              doNothing,
postDrawTagList:               doNothing,
postSwitchLayout:              doNothing,
sort:                          caseInsensitiveSort,
systemTags:                    [],
validate:                      defaultValidate,
validationPattern:             /^[0-9A-Za-z_\- ]+$/

Change logs:

v1.1.1 (2016-08-23)

  • Performance improvements for long lists of system tags.

v1.1.0 (2015-12-07)

  • JS update

v1.0.1 (2015-05-13)

  • bugfix - the entityTags setting was not being updated correctly on a removeTag event for any settings objects that were returned. Internal data was correct.

v1.0.0 (2014-05-01)

  • major update.

v0.8.6 (2013-07-10)

  • fixed a bug where the systems tag list wouldn't be correctly deduped if given redundant tags in the entity tags list

v0.8.3 (2013-07-09)

  • easy config to reverse order of trays w/o passing a callback and select box options
  • New classes to make it easier to style edit and view tags differently and fixed a bug with no preventDefault() on switch mode buttons causing a page jitter

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