Easy & Configurable jQuery Tagging System Plugin - TagInput.js

File Size: 202 KB
Views Total: 1089
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.