Advanced Tagging Input Plugin For jQuery - Tags.js

Advanced Tagging Input Plugin For jQuery - Tags.js
File Size: 9.71 KB
Views Total: 1989
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.


4. Customize the placeholder text of the tags input.

  inputNote: 'Type Something and Press Enter'

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

  repeat: 'Duplicate Tag',
  onRepeat: function(tagValue,tagId) {
    // do something

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

  del: true,
  onDel: function(tagValue,tagId) {
    // do something

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


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

  max: 10

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

  theme: 'black'

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

  beforeInput: function(tagValue){
      alert("aaa is not allowed");
      return false;
  afterInput: function(tagValue){
    // do something

11. API methods.

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

// add a tag

// delete a tag

// clear all tags

// return the total amount of tags

// return the index of the tag

// convert tags into a string

// convert tags into JSON data

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