Tiny Text Field Based Tags Input Plugin For jQuery - Tagify

Tiny Text Field Based Tags Input Plugin For jQuery - Tagify
File Size: 131 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Tagify is a tiny jQuery plugin used to generate a simple, animated, high-performance tag / token input from either input field or textarea. It also provides a vanilla JavaScript version which allows you to implement the tags input in pure JavaScript. 

Features:

  • Auto prevent duplicate tags.
  • Auto split input text into tags by comma or Enter key.
  • Compatible with Bootstrap 4 and Bootstrap 3.

How to use it:

1. Put the main style sheet tagify.css in the head:

<link href="tagify.css" rel="stylesheet">

2. Include the JavaScript file jQuery.tagify.js after jQuery.

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

3. You can also include the vanilla JS version if you'd like to implement the Tagify in pure JavaScript.

<script src="tagify.js"></script>

4. Create a normal input field or textfield for the tag input. You can set the predefined tags in the value attribute as follow:

<input name="tags" placeholder="write some tags" value="predefined tags here">

5. Initialize the Tagify and done.

// jQuery
$('[name=tags]').tagify();

// Vanilla JavaScript
var input = document.querySelector('input[name=tags]'),
tagify = new Tagify( input );

6. Enable the duplicate detection.

$('[name=tags]').tagify({duplicates : false});

7. More configuration options.

$('[name=tags]').tagify({

  // [regex] split tags by any of these delimiters ("null" to cancel)
  delimiters: ",", 

  // regex pattern to validate input by. 
  pattern: null, 

  // maximum number of tags
  maxTags: Infinity, 

  // exposed callbacks object to be triggered on certain events
  callbacks: {}, 

  // automatically adds the text which was inputed as a tag when blur event happens
  addTagOnBlur: true, 

  // allow tuplicate tags
  duplicates: false, 

  // is this list has any items, then only allow tags from this list
  whitelist: [], 

  // a list of non-allowed tags
  blacklist: [], 

  // should ONLY use tags allowed in whitelist
  enforceWhitelist: false, 

  // tries to autocomplete the input's value while typing
  autoComplete: true, 

  // String - when tags have multiple properties, and for each tag another property should be used besides the "value"
  mapValueToProp: "", 

  dropdown: {
    classname: '',
    enabled: 2, // minimum input characters needs to be typed for the dropdown to show
    maxItems: 10
  }
  
});

8. API methods.

var myInput = $('[name=tags]').tagify();

// adds new tag
// String (word, single or multiple with a delimiter) or an Array of Objects
myInput.addTags();

// removes a specific tag
myInput.removeTag(DOM);

// removes all tags
myInput.removeAllTags();

// destroy the plugin
myInput.destroy();

9. Events.

var myInput = $('[name=tags]').tagify();

myInput
.on('add', function(e, tagName){
  // on add
})

.on('remove', function(e, tagName){
  // on remove
})

.on('duplicate', function(e, tagName){
  // on duplicate
})

.on('maxTagsExceed', function(e){
  // on maxTagsExceed
})

.on('blacklisted', function(e, tagName){
  // on blacklisted
})

.on('notWhitelisted', function(e, tagName){
  // on notWhitelisted
})

Changelog:

v2.2.10 (2018-09-24)

  • Bugfixes

v2.1.9 (2018-09-08)

  • Fixed Trigger dropdown

v2.1.4 (2018-08-18)

  • Tiny bug fix in "normalizeTags" where Tagify instances with complex whitelist didn't allow entering any other tags except the whitelist's ones

v2.1.1 (2018-08-12)

  • You can add Tags in the readonly mode

v2.1.0 (2018-07-08)

  • general refactoring

2018-06-24

  • Fixed for key/value tags

2018-03-28

  • Bootstrap 4 Support

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