Basic Tags Input In Vanilla JavaScript – InputTags

A vanilla JavaScript based tags input component that stores the typed tags in a hidden input field.

Type something in the input and then press Enter or Comma key to add a new tag.

Click the X button or press the Backspace button 2 times to delete the tag.

How to use it:

Create a regular input field for the tags input.

<div id="tags">
  <input type="text" id="example" placeholder="Add a tag...">
</div>

Initialize the InputTags on the input field and done.

new inputTags({
    id: 'example'
});

Define an array of preselected tags.

new inputTags({
    id: 'example',
    tags: ['css', 'script', 'com']
});

Specify the maximum number of tags allowed to be typed.

new inputTags({
    id: 'example',
    maxTags: 10
});

Determine whether or not to allow duplicate tags.

new inputTags({
    id: 'example',
    allowDuplicateTags: false
});

Trigger a function when a tag is going to be removed.

new inputTags({
    onTagRemove : function (tag) {
      alert( tag + "Tag is going to be removed");
    }
});