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
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
.