Import the script in your code and create a new
Woot, you have a tags-input! However,
tags-input only provides the element. The rest is up to you. To properly handle the element, we need to listen for some events and react accordingly.
// Test datavar data = 'Amy' 'Annalise' 'Casey' 'Erica' 'Fong' 'George' 'Jason' 'Jen' 'Jim' 'Josh' 'Kelly' 'Kevin' 'Maggie' 'Nathan' 'Ryland' 'SaVance' 'Trezy' 'Vannessa' 'YJ' 'Zach'// Grad a reference to our tags-inputvar tagsInput = document// Listen for the user to start typingtagsInput
You can also check out a live demo here.
This is where it all begins. a
tags-input element can be mostly configured via attributes.
||false||optional||Turns on debugging for this
||false||optional||Allow values to be duplicated.|
||false||optional||Allow the user to add more than one tag.|
||false||optional||Allow the user to create tags that are not in the options list.|
Any of these attributes can be set as a boolean attribute, e.g.
<tags-input data-multiple>, or an attribute with a boolean string, e.g.
<tags-input data-multiple="true" data-new="false">.
tags-input element works much like a regular
input element. In addition to triggering the same events as a regular
input element, it also triggers some unique events that make it easier to react to changes in the
This event is triggered when a
tags-input's input is converted to a tag. The tag that was added can be accessed via
This event is triggered when the user tries to add an invalid tag, or a duplicate tag if the
tags-input doesn't have the
allow-new property. The
event.detail property will contain a string of either
duplicate depending on what the error was.
This event is triggered when a tag is removed from a
tags-input. The tag that was removed can be accessed via
search event is the main event used for managing a
tags-input. This is fired every time the user changes the content of the input -- much like the
input event. The main difference is that the
search event includes the full content of the input, rather than just the key pressed. This can be accessed via
tags-input element exposes methods to make it easier to interact with.
Empties the contents of the
tags-input's text box. This does not remove tags.
Empties the contents of the dropdown list. This is useful when using
merge set to
Pass an array of options to be displayed in the dropdown list. Options can be either strings or objects. Objects must have a
value property which will be displayed, and may optionally have an