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 UI">
                

Tag trigger

New from 4.3.5

To set trigger for creating tags, use attribute data-tag-trigger. By default this attribute have a next values Enter, Space, Comma - , , ,. You can set your own trigger with this attribute. For all keys values read this post.

For use space or comma you must use next key words: Space or Spacebar and Comma.

Use Space to add tags


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

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, Space, Comma

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 UI">
                

Additional classes

You can use additional classes to change input size: .input-large and .input-small.

Input small
Input regular
Input large