Simplest jQuery Tags Input Plugin - tags

Just another jQuery tags input plugin that converts any words into tags in a text field. Type some tags in the input field, and separate them with Enter, SPACE, or Comma.

Features:

• Add the tag to tags list by check the key pressed.
• Add the tag after checking the value and refresh the display if it was successfully added.
• Check if the value is already contained in the input. If the tag is already container, the plugin highlights it for 0.5s.
• Get each tag value with val() method.

How to use it:

1. Add jQuery library and the jQuery tags plugin into your html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="tags.js"></script>

2. To enable the plugin, just add the data-role="tagsinput" attribute to the input field.

<input id="input-tag" type="text" data-role="tagsinput">

3. The sample CSS to style the tags & input field.

.my-tagsinput {
  font-size: 75%;
  font-weight: 700%;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid #D8D8D8;
  border-radius: 0.4em 0.4em 0.4em 0.4em;
  padding: 0.2em 0.3em 0.2em 0.3em;
  margin: 0.4em 0em 0.4em 0em;
  cursor: text;
}

.my-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  max-width: inherit;
}

.tag {
  background-color: #2E9AFE;
  margin: 0em 0.2em 0em 0.2em;
  padding: 0em 0.5em 0em 0.5em;
  border-radius: 0.2em 0.2em 0.2em 0.2em;
  color: white;
  cursor: auto;
}

.remove {
  margin-left: 0.4em;
  font-weight: bold;
  cursor: pointer;
}

4. You can then access the value of the input with the .val () method.

---

This awesome jQuery plugin is developed by Remi-Laot-CreiZyz. For more Advanced Usages, please check the demo page or visit the official website.