Author: | okcoker |
---|---|
Views Total: | 3,007 views |
Official Page: | Go to website |
Last Update: | October 19, 2018 |
License: | MIT |
Preview:

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()
Changelog:
v1.14.0 (10/19/2018)
- Update inputFormatter docstring for input ref