advanced tagging input - Free Download Advanced Tagging Input Plugin For jQuery - Tags.js

Free Download Advanced Tagging Input Plugin For jQuery – Tags.js

By Posted on

This time I will share jQuery Plugin and tutorial about Advanced Tagging Input Plugin For jQuery – Tags.js, hope it will help you in programming stack.

advanced tagging input - Free Download 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
   

Demo Download

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.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/jquery.tag.js"></script>
3 <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.

view source
1 <div id="example" tagname="uniqueName"></div>

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

view source
1 $("#example").tagsInit();

4. Customize the placeholder text of the tags input.

view source
1 $("#example").tagsInit({
2   inputNote: 'Type Something and Press Enter'
3 });

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

view source
1 $("#example").tagsInit({
2   repeat: 'Duplicate Tag',
3   onRepeat: function(tagValue,tagId) {
4     // do something
5   }
6 });

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

view source
1 $("#example").tagsInit({
2   del: true,
3   onDel: function(tagValue,tagId) {
4     // do something
5   }
6 });

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

view source
1 $("#example").tagsInit({
2   action:{
3     href:'https://www.google.com/search?q=%v%',
4     target:'_blank'
5   }
6 });

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

view source
1 $("#example").tagsInit({
2   max: 10
3 });

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

view source
1 $("#example").tagsInit({
2   theme: 'black'
3 });

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

view source
01 $("#example").tagsInit({
02   beforeInput: function(tagValue){
03     if(tagValue=='aaa'){
04       alert("aaa is not allowed");
05       return false;
06     }
07   },
08   afterInput: function(tagValue){
09     // do something
10   }
11 });

11. API methods.

view source
01 const myTag = $("#example").tagsInit({
02       // options here
03 });
04  
05 // add a tag
06 myTag.tagsAdd(tagValue);
07  
08 // delete a tag
09 myTag.tagsDel(tagValue);
10  
11 // clear all tags
12 myTag.tagsClear();
13  
14 // return the total amount of tags
15 myTag.tagsCount();
16  
17 // return the index of the tag
18 myTag.tagsIndexof(tagValue,tagId);
19  
20 // convert tags into a string
21 myTag.tagsStr();
22  
23 // convert tags into JSON data
24 myTag.tagsJson();

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

Related posts: