PolyTagsInput

A simple Javascript package for creating tags-input fields. This package contains only the behaviour of a tags-input field, all UI/UX is up to you to create.

Install

npm install @polytope/poly-tags-input

Usage

constfield=document.querySelector<HTMLInputElement>('#textField')!constwrapper=document.querySelector<HTMLDivElement>('#wrapper')!consttagLine=newPolyTagsInput(field)tagLine.add('Polytope','Tagable','InputField');tagLine.onValueChanged=setTags;setTags(tagLine.value)functionsetTags(tags: string[]): void{while(wrapper.lastChild!=fieldWrapper){wrapper.removeChild(wrapper.lastChild!!)}tags.forEach((tag: string,index: number)=>{constaTag=document.createElement('span');consttext=document.createElement('span')text.innerText=tagconstbutton=document.createElement('button')button.innerText="x"button.onclick=()=>tagLine.remove(index);aTag.append(text,button)wrapper.appendChild(aTag);})}

For more in-depth example go to the example project on github repository

API

Command	Type	Description
element: HTMLInputElement	GETTER	The HTML Input Element that the instance is attached to.
size: number	GETTER	Get the number of tags currently added. This respect settings of both distinct and strict.
value: string[]	GETTER	Return the current added tags. It respects the settings of both distinct and strict.
onValueChanged = (value: string[]) => void	SETTER	The callback function the library should call when any changes to the value of the input field has been made.
onSuggestions = (suggestions: string[] | null) => void	SETTER	The callback function the library should call with the suggestions for the inputted value. The callback can receive two types of values: string[]: When there are matching suggestions, the callback will be invoked with an array of the matching suggestions. null: When there are no matching suggestions, the callback will be invoked with a null value.
strict = true | false	SETTER	Set whether the Tag-Input should be strict or not. Default is non-strict. One can switch between strict and non-strict without any data-loss. When strict is enabled, only tags from the suggestions array can be added. When strict is disabled, all free-text tags are allowed.
distinct = true | false	SETTER	Set whether the Tag-Input should be distinct or not. Default is non-distinct. The Tag-Input will behave as a Set if set to distinct. One can switch between distinct and non-distinct without any data-loss. When distinct is enabled, any tag can only be part of the value once. When distinct is disabled, tags can be repeated in the value.
suggestions = string[]	SETTER	Set the array of suggestions to search within.
add(... tags; string[]): void	METHOD	Add one or more tags to the input. This can be used to specify pre-defined tags or to programmatically add a tag. Use in the form add('tag1', 'tag2', ... 'tagN') or add(... arrayOfTags)
remove(index: number): void	METHOD	Remove a tag on a specific index.