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

const field = document.querySelector<HTMLInputElement>('#textField')!
const wrapper = document.querySelector<HTMLDivElement>('#wrapper')!

const tagLine = new PolyTagsInput(field)
tagLine.add('Polytope', 'Tagable', 'InputField');
tagLine.onValueChanged = setTags;

setTags(tagLine.value)

function setTags(tags: string[]): void {
    while (wrapper.lastChild != fieldWrapper) {
        wrapper.removeChild(wrapper.lastChild!!)
    }
    tags.forEach((tag: string, index: number) => {
        const aTag = document.createElement('span');
        const text = document.createElement('span')
        text.innerText = tag
        const button = 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.