Easy & Configurable jQuery Tagging System Plugin - TagInput.js

Just another jQuery tag input plugin which turns the normal input field into a tag editing control to manage tags, tokens, keywords and etc.

How to use it:

1. Load the required style sheet TagInput.css to style the tag input.

<link href="TagInput.css" rel="stylesheet">

2. Load JQuery library and the JavaScript TagInput.js at the end of the document to reduce the page load time.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="TagInput.js"></script>

3. Adding the data-TagInput attribute to the input field will automatically initialize the plugin on page load.

<input id="demo" 
       name="demo"
       type="text"
       data-TagInput
       value="tag1, tag2">

4. Here are several options which can be passed into the tag input via data-OPTION attribute as follows:

• data-Glue: custom divider for the tags
• data-MinLength: minimum length
• data-MaxLength: maximum length
• data-LabelAnimationClass: additional CSS class for animations
• data-Glue: CSS classes for remove button

<input id="demo" 
       name="demo"
       type="text"
       data-TagInput
       data-Glue=","
       data-MinLength="1"
       data-MaxLength="16"
       data-LabelAnimationClass="Material"
       value="tag1, tag2">

Change log:

2016-07-14

• v1.1

2016-07-12

• added reset method

---

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