Tag input

Enhancement for standard HTML input[type=text] to tag input - managing tags.

About

To create tag input, add attribute data-role="taginput" to HTML input element. You must assign role input to text input input type="text". Enter tag name and press Enter or ,


                    <input type="text" data-role="taginput">

Init values

You can preset values for tag-input. To preset values use attribute value. Values can be separated with symbol, defined with attribute data-tag-separator.


                    <input type="text" data-role="taginput" value="css3,javascript,html5,Metro 4">

Tag trigger

To set trigger for creating tags, use attribute data-tag-trigger. By default this attribute have a next value 13, 188 - Enter, ,. You can set your own trigger with this attribute.

Use Space to add tags


                    <input type="text" data-role="taginput" data-tag-trigger="32">

Max tags

You can set a maximum count of tag, who can be created. To set maximum, use attribute data-max-tags.

You can add 5 tags


                    <input type="text" data-role="taginput" data-max-tags="5">

Random colors for tags

With attribute data-random-color="true", you can set special mode for component when tag have random colors.

Tags have a random color


                    <input type="text" data-role="taginput" data-random-color="true">

Options

Option	Data-*	Default	Desc
`randomColor`	`data-random-color`	false	User random color for tags
`maxTags`	`data-max-tags`	0	If value more then 0, user can't create tags more then this value
`tagSeparator`	`data-tag-separator`	,	Default - comma, tags separator for result value
`tagTrigger`	`data-tag-trigger`	13, 188	Key codes for triggering tags creating, Default - `Enter`, `,`

Events

Event	Data-*	Context	Desc
`onBeforeTagAdd(val, values)`	`data-on-before-tag-add`	input	If this function return false, tag can't be added
`onTagAdd(tag, val, values)`	`data-on-tag-add`	input
`onBeforeTagRemove(tag, val, values)`	`data-on-before-tag-remove`	input	If this function return false, tag can't be removed
`onTagRemove(tag, val, values)`	`data-on-tag-remove`	input
`onTag(tag, val, values)`	`data-on-tag`	input
`onTagInputCreate(input)`	`data-on-tag-input-create`	input

Methods

You can use methods to interact with input component: tags(), clear(), val(), val(values_array).


                    var input = $(el).data('taginput');
                    input.clear();

Customize

You can customize your input with special attributes:

Option	Data-*	Desc
`clsTag`	`data-cls-tag`	Additional classes for tag.
`clsTagTitle`	`data-cls-tag-title`	Additional classes for tag title.
`clsTagRemover`	`data-cls-tag-remover`	Additional classes for tag remove button.


                    <input type="text"
                        data-role="taginput"
                        data-cls-tag-title="text-bold fg-white"
                        data-cls-tag="bg-olive"
                        data-cls-tag-remover="bg-darkOlive fg-white"
                        value="css, javascript, html, Metro 4">

Table of contents