Advanced Tagging Input Plugin For jQuery - Tags.js

Tags.js is an advanced, feature-rich tagging system used to manage (add, remove, validate) tags & tokens with an input field.

Key Features:

• Detect duplicate tags.
• Custom click action.
• Allows to specify the maximum number of tags allowed to input.
• Allows to manage tags programmatically.
• Dark, light, and blue theme.

How to use it:

1. Add the stylesheet jquery.tag.css and JavaScript jquery.tag.js to the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tag.js"></script>
<link rel="stylesheet" href="/path/to/jquery.tag.css" />

2. Create a placeholder for the tags input. The tagname attribute is only needed if there are multiple instances on a page.

<div id="example" tagname="uniqueName"></div>

3. Attach the function tagsInit() to the placeholder element. That's it.

$("#example").tagsInit();

4. Customize the placeholder text of the tags input.

$("#example").tagsInit({
  inputNote: 'Type Something and Press Enter'
});

5. Determine whether to allow duplicate tags. Boolean or String.

$("#example").tagsInit({
  repeat: 'Duplicate Tag',
  onRepeat: function(tagValue,tagId) {
    // do something
  }
});

6. Determine whether to allow to delete tags. Boolean or String.

$("#example").tagsInit({
  del: true,
  onDel: function(tagValue,tagId) {
    // do something
  }
});

7. Attach click actions to tags. Boolean or Object or Function.

$("#example").tagsInit({
  action:{
    href:'https://www.google.com/search?q=%v%',
    target:'_blank'
  }
});

8. Determine the maximum number of tags allowed to type. Default: 0 (infinity).

$("#example").tagsInit({
  max: 10
});

9. Possible themes: 'white', 'black', and 'blue' (default).

$("#example").tagsInit({
  theme: 'black'
});

10. Callback functions which will be triggered before/after input.

$("#example").tagsInit({
  beforeInput: function(tagValue){
    if(tagValue=='aaa'){
      alert("aaa is not allowed");
      return false;
    }
  },
  afterInput: function(tagValue){
    // do something
  }
});

11. API methods.

const myTag = $("#example").tagsInit({
      // options here
});

// add a tag
myTag.tagsAdd(tagValue);

// delete a tag
myTag.tagsDel(tagValue);

// clear all tags
myTag.tagsClear();

// return the total amount of tags
myTag.tagsCount();

// return the index of the tag
myTag.tagsIndexof(tagValue,tagId);

// convert tags into a string
myTag.tagsStr();

// convert tags into JSON data
myTag.tagsJson();

---

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