Highly Customizable Tagging JavaScript Library – taggle.js

taggle.js is an elegant, customizable, cross-browser tagging JavaScript library to manage, add, remove, autocomplete tags in an editable container.

More features:

• Works on any elements, not only form fields.
• Duplicate detection.
• Specify allowed and disallowed tags.
• Allows to set pre-selected tags.
• Autocomplete support.
• Custom delimeter.
• Callback function.

Basic usage:

Install the taggle.js package.

# NPM
$ npm install taggle --save
# Bower
$ bower install taggle --save

Import it into your module.

import Taggle from 'taggle';

Or import the compiled JavaScript & CSS files in the html file.

<link rel="stylesheet" href="css/taggle.css">
<script src="js/taggle.min.js"></script>

Create an empty container for the tag manager.

<div id="example"></div>

Enable the plugin and done.

var example = new Taggle('example')

Customize the tagging plugin with the following options.

var example = new Taggle('example',{
    /**
     * Class names to be added on each tag entered
     * @type {String}
     */
    additionalTagClasses: '',
    /**
     * Allow duplicate tags to be entered in the field?
     * @type {Boolean}
     */
    allowDuplicates: false,
    /**
     * Allow the saving of a tag on blur, rather than it being
     * removed.
     *
     * @type {Boolean}
     */
    saveOnBlur: false,
    /**
     * Clear the input value when blurring.
     *
     * @type {Boolean}
     */
    clearOnBlur: true,
    /**
     * Class name that will be added onto duplicate existant tag
     * @type {String}
     * @todo
     * @deprecated can be handled by onBeforeTagAdd
     */
    duplicateTagClass: '',
    /**
     * Class added to the container div when focused
     * @type {String}
     */
    containerFocusClass: 'active',
    /**
     * Should the input be focused when the container is clicked?
     * @type {Bool}
     */
    focusInputOnContainerClick: true,
    /**
     * Name added to the hidden inputs within each tag
     * @type {String}
     */
    hiddenInputName: 'taggles[]',
    /**
     * Tags that should be preloaded in the div on load
     * @type {Array}
     */
    tags: [],
    /**
     * The default delimeter character to split tags on
     * @type {String}
     * @todo Change this to just "delimiter: ','"
     */
    delimeter: ',',
    delimiter: '',
    /**
     * Add an ID to each of the tags.
     * @type {Boolean}
     * @todo
     * @deprecated make this the default in next version
     */
    attachTagId: false,
    /**
     * Tags that the user will be restricted to
     * @type {Array}
     */
    allowedTags: [],
    /**
     * Tags that the user will not be able to add
     * @type {Array}
     */
    disallowedTags: [],
    /**
     * Limit the number of tags that can be added
     * @type {Number}
     */
    maxTags: null,
    /**
     * If within a form, you can specify the tab index flow
     * @type {Number}
     */
    tabIndex: 1,
    /**
     * Placeholder string to be placed in an empty taggle field
     * @type {String}
     */
    placeholder: 'Enter tags...',
    /**
     * Keycodes that will add a tag
     * @type {Array}
     */
    submitKeys: [COMMA, TAB, ENTER],
    /**
     * Preserve case of tags being added ie
     * "tag" is different than "Tag"
     * @type {Boolean}
     */
    preserveCase: false,
    // @todo bind callback hooks to instance
    /**
     * Function hook called with the to-be-added input DOM element.
     *
     * @param  {HTMLElement} li The list item to be added
     */
    inputFormatter: noop,
    /**
     * Function hook called with the to-be-added tag DOM element.
     * Use this function to edit the list item before it is appended
     * to the DOM
     * @param  {HTMLElement} li The list item to be added
     */
    tagFormatter: noop,
})

Callback functions.

var example = new Taggle('example',{
    /**
     * Function hook called before a tag is added. Return false
     * to prevent tag from being added
     * @param  {String} tag The tag to be added
     */
    onBeforeTagAdd: noop,
    /**
     * Function hook called when a tag is added
     * @param  {Event} event Event triggered when tag was added
     * @param  {String} tag The tag added
     */
    onTagAdd: noop,
    /**
     * Function hook called before a tag is removed. Return false
     * to prevent tag from being removed
     * @param  {String} tag The tag to be removed
     */
    onBeforeTagRemove: retTrue,
    /**
     * Function hook called when a tag is removed
     * @param  {Event} event Event triggered when tag was removed
     * @param  {String} tag The tag removed
     */
    onTagRemove: noop
})

API methods.

// sets new options
example.setOptions(options)
// adds new tags
example.add(tag(s))
// removes a tag
example.remove(tag, remove_all=false)
// removes all tags
example.removeAll()
// gets tags object
example.getTags()
// gets tags array
example.getTagElements()
// gets tag values
example.getTagValues()
// gets text input
example.getInput()
// gets the original textarea container
example.getContainer()
// disable
example.disable()
// enable
example.enable()
// sets arbitrary data
example.setData(Any)
// gets the arbitrary data
example.getData()
// disables all events
example.removeEvents()
// Re-attach instance events.
example.attachEvents()

Changelog:

v1.14.0 (10/19/2018)

• Update inputFormatter docstring for input ref