Material Inspired Tag Input Plugin For jQuery - AddTags

AddTags is a JavaScript plugin used to create a simple, customizable, Material Design style tags input that can be implemented in either jQuery or Vanilla JavaScript.

Features:

• Highly customizable.
• Duplicate tags detection.
• Predefined tags.
• Allows to remove tags.
• # hash is supported.
• Custom delimiters.
• Case sensitive or not.
• Allows to set the maximum number of tags

How to use it:

1. Include the latest version of jQuery library if you'd like to implement the AddTags as a jQuery plugin.

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

2. Include the jQuery AddTags plugin and other required resources on the webpage.

<link rel="stylesheet" href="addTags.css">
<script src="res/Obj.js"></script>
<script src="addTags.js"></script>

3. Create a normal input field for the plugin.

<input id="demo">

4. Initialize the AddTags with default settings.

// jQuery
$("#demo").addTags();

// JavaScript
$add.Tags("#demo");

5. All available settings with default values.

$("#demo").addTags({

  // name of the tags input
  name: "",

  // class of the tags input
  class: "",

  // ID of the tags input
  id: "",

  // placeholder of the tags input
  placeholder: "",

  // the maximum number of tags
  limit: 0,

  // enable tab key to add the current value as a tag
  tab: false,

  // enable space key to add the current value as a tag
  space: false,

  // enable comma key to add the current value as a tag
  comma: true,

  // enable enter key to add the current value as a tag
  enter: false,

  // enable backspace key to delete the tag
  backspace: true,

  // duplicate detection
  duplicates: false,

  // is removable?
  removable: true,

  // default delimiter
  delimiter: ",",

  // is case sensitive?
  casesensitive: false,

  // prepend a hash to the tag
  autohash: false,

  // should a hash be prepended to each tag in the value string
  valuehash: false

});

6. You're also allowed to pass the options via HTML5 data attributes as this:

<input id="demo" data-duplicates="true">

---

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