Turn A Text Field Into A Tags Input – Tagplug

Preview:

Description:

Tagplug is a small JavaScript plugin that turns a regular text field into an easy-to-style tags input.

To insert a new tag into the input, type something and then press the Enter or Comma key.

It also has the ability to prevent typing the duplicate tag.

How to use it:

Create a normal input field on the page.

<input type="text" id="tag-input">

Load the main JavaScript file at the end of the document.

<script src="index.js"></script>

Initialize the Tagplug plugin on the input field and done.

var tagInput = new TagsInput({
    selector: 'tag-input'
});

The example CSS to style the tags input.

.tags-input-wrapper {
  background: #f9f9f9;
  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: #009432;
  color: white;
  border-radius: 40px;
  padding: 0px 3px 0px 7px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.tags-input-wrapper .tag a {
  margin: 0 7px 3px;
  display: inline-block;
  cursor: pointer;
}

Specify the maximum number of tags allowed to type in the input. Default: no limit.

var tagInput = new TagsInput({
    selector: 'tag-input',
    max: 10
});

Enable/disable duplicate detection. Default: false.

var tagInput = new TagsInput({
    selector: 'tag-input',
    duplicate: true
});

Default CSS classes.

var tagInput = new TagsInput({
    wrapperClass : 'tags-input-wrapper',
    tagClass : 'tag'
});

Add tags to the tags input programmatically.

tagInput.addData(["CSS","Script",".Com"])