Overview

Tag input component based on tagify.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the Tagify class.
See tagify documentation for options not listed here.
Parameters:
  • element: string|HTMLInputElement|HTMLTextAreaElement|JQuery
    HTMLInputElement or HTMLTextAreaElement selector, element, or JQuery object.
  • options.maxChars?: number
    Maximum length of tag input. This is a proprietary option and not a tagify option. The default is no limit (undefined).
  • options.readonly?: number
    Read-only. This is a proprietary option, not a tagify option. Default is false. 
                    import {components} from 'metronic-extension';

// Initialize Tagify.
new components.Tagify(document.getElementById('basicTagify'));

// Read-only.
new components.Tagify(document.getElementById('readonlyTagify'), {readonly: true});

// Inline Suggestions.
new components.Tagify(document.getElementById('inlineSuggestionsTagify'), {
  whitelist: ['tag1', 'tag2', 'tag3'],
  dropdown: {
    maxItems: 20,
    classname: 'tagify__inline__suggestions',
  }
});

// List Suggestions.
new components.Tagify(document.getElementById('listSuggestionsTagify'), {
  whitelist: ['tag1', 'tag2', 'tag3'],
  dropdown: {maxItems: 20},
});
public addTags() Add one or more tags.
Parameters:
  • tags: string|string[]|T[]
    Tags to add. When a string, it can be either a single word or multiple words separated with a delimiter.
  • clearInput?: boolean
    If true, the input's value gets cleared after adding tags. Default is false.
  • skipInvalid?: boolean
    If true, do not add, mark & remove invalid tags. Default is true.
Return:
  • HTMLElement[] List of HTML elements representing the tags that were added.
                    // Add one tag.
tagify.addTags('tag4');

// Add multiple tags at once.
tagify.addTags(['tag5', 'tag6']);
public removeAllTags() Removes all tags and resets the original input tag's value property.
public setReadonly() Sets the read-only state of the Tagify instance.
Parameters:
  • readonly: boolean
    True to enable read-only mode, false to disable it.
public setDisabled() Sets the disabled state of the Tagify instance.
Parameters:
  • disabled: boolean
    True to enable disabled mode, false to disable it.
public onAddTag() Sets the callback function to be called when a tag is added.
Parameters:
  • handler: (event: Tagify.AddEventData) => void
    Callback function.
Return:
  • Tagify
                    tagify.onAddTag(event => {
  console.log('Tag added');
});
public onRemoveTag() Sets the callback function to be called when a tag is removed.
Parameters:
  • handler: (event: Tagify.RemoveEventData) => void
    Callback function.
Return:
  • Tagify
                    tagify.onRemoveTag(event => {
  console.log('Tag has been deleted');
});
public onChangeTag() Sets the callback function to be called when the tag is modified.
Parameters:
  • handler: (event: Tagify.AddEventData|Tagify.RemoveEventData) => void
    Callback function.
Return:
  • Tagify
                    tagify.onChangeTag(event => {
  console.log('Tag has been changed');
});
public dispose() Reverts the input element back as it was before Tagify was applied.

Basic

Basic example of Tagify attached to an input element.
              <!--begin::Tagify-->
<input id="basicTagify" class="form-control form-control-solid" value="tag1" />
<!--end::Tagify-->
            
              import {components} from 'metronic-extension';

// Initialize Tagify.
const basicTagify = new components.Tagify(document.getElementById('basicTagify'));

// Set callback functions for various operations.
basicTagify
  .onAddTag(event => {
    // Tag added.
    console.log('Tag added');
  })
  .onRemoveTag(event => {
    // Tag removed.
    console.log('Tag has been deleted');
  })
  .onChangeTag(event => {
    // Tag was changed.
    console.log('Tag has been changed');
  });

Read-only

If the readonly option is set to true, the Tagify will be read-only.
              <input id="readonlyTagify" class="form-control form-control-solid" value="tag1" />
            
              import {components} from 'metronic-extension';

// Read-only.
new components.Tagify(document.getElementById('readonlyTagify'), {
  readonly: true,
});

Inline Suggestions

When Tagify has the focus, inline-style suggestions appear immediately.
              <input id="inlineSuggestionsTagify" class="form-control form-control-solid" value="tag1" />
            
              import {components} from 'metronic-extension';

// Inline Suggestions.
new components.Tagify(document.getElementById('inlineSuggestionsTagify'), {
  whitelist: ['tag1', 'tag2', 'tag3'],
  dropdown: {
    maxItems: 20,
    classname: 'tagify__inline__suggestions',
  }
});

List Suggestions

When Tagify has the focus, list-style suggestions appear immediately.
              <input id="listSuggestionsTagify" class="form-control form-control-solid" value="tag1" />
            
              import {components} from 'metronic-extension';

// List Suggestions.
new components.Tagify(document.getElementById('listSuggestionsTagify'), {
  whitelist: ['tag1', 'tag2', 'tag3'],
  dropdown: {
    maxItems: 20,
  },
});

Single-Value Select

Similar to native <Select> element, but allows free text as value.
If the `enforceWhitelist` setting is set to `true` and a tag is currently selected,
user text input will be disabled, so altering the currently selected tag is forbidden. 
              <input id="singleValueSelectTagify" class="form-control form-control-solid" value="tag1">
            
              // Single-Value Select.
new components.Tagify(document.getElementById('singleValueSelectTagify'), {
  enforceWhitelist: true,
  mode: 'select',
  whitelist: ['tag1', 'tag2', 'tag3'],
  dropdown: {
    closeOnSelect: true, // Close the dropdown when a suggestion is selected
    maxItems: Infinity,
  },
});