Highly Customizable Tagging JavaScript Library – taggle.js

Category: Form , Javascript , Recommended | December 7, 2017
Author: okcoker
Views Total: 319
Official Page: Go to website
Last Update: December 7, 2017
License: MIT

Preview:

Highly Customizable Tagging JavaScript Library – taggle.js

Description:

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()

Leave a Reply