Minimal Tags Input Plugin With Vanilla JavaScript – tags-input

Preview:

Description:

tags-input is a minimal JavaScript plugin that transforms the regular input field into a tagging system for easier tags/tokens input.

How to use it:

Create a normal text field on the page.

<input type="text" id="example">

Include the JavaScript file ‘tags-input.js’ at the bottom of the webpage.

<script src="tags-input.js"></script>

Initialize the tags input plugin on the text field.

var instance = new TagsInput({
    selector: 'example'
});

Add pre-selected tags to the tags input.

instance.addData(['HTML' , 'JavaScript' , 'CSS'])

This will convert the text field into…

<div class="tags-input-wrapper">
  <span class="tag">HTML<a>×</a></span>
  <span class="tag">JavaScript<a>×</a></span>
  <span class="tag">CSS<a>×</a></span>
  <input>
</div>
<input type="text" id="example" hidden="true">

Apply your own styles to the tags input.

.tags-input-wrapper{
  background: transparent;
  padding: 10px;
  border-radius: 4px;
  max-width: 400px;
  border: 1px solid #ccc
}
.tags-input-wrapper input{
  border: none;
  background: transparent;
  outline: none;
  width: 150px;
}
.tags-input-wrapper .tag{
  display: inline-block;
  background-color: #fa0e7e;
  color: white;
  border-radius: 40px;
  padding: 0px 3px 0px 7px;
  margin-right: 5px;
  margin-bottom:5px;
  box-shadow: 0 5px 15px -2px rgba(250 , 14 , 126 , .7)
}
.tags-input-wrapper .tag a {
  margin: 0 7px 3px;
  display: inline-block;
  cursor: pointer;
}

Specify the maximum number of tags allowed to insert. Default: null.

var instance = new TagsInput({
    max : 10
});

Enable/disable duplicate detection. Default: false (disable).

var instance = new TagsInput({
    duplicate : true
});

Set the wrapper element for the tags input.

var instance = new TagsInput({
    wrapperClass : 'tags-input-wrapper'
});

Changelog:

01/09/2020

• JS Update