Tiny Text Field Based Tags Input Plugin For jQuery - Tagify

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.23.0 (2019-07-11)

• huge improvements to custom suggestions list

v2.22.3 (2019-06-19)

• Fixed Pressing Enter while Suggestion List is open

v2.22.2 (2019-06-16)

• Fixed Loading CSS Error

v2.22.1 (2019-06-06)

• "removeTag" without an argument now removes last tag automatically
• fixed Input value sent changed 

v2.21.0 (2019-05-29)

• More bugs fixed

v2.19.0 (2019-05-15)

• More bugs fixed.

v2.19.0 (2019-05-15)

• More bugs fixed.

v2.18.2 (2019-05-02)

• fixed demo IE11 issues

v2.18.1 (2019-04-27)

• minor insignificant changes in code

v2.17.0 (2019-04-14)

• fixed a minor bug from previous commit

v2.16.0 (2019-04-11)

• Fixed: Incorrect interaction between enabled and maxItems for dropdown

v2.15.2 (2019-04-06)

• Fix exception when input initial value is an empty json list

v2.15.1 (2019-03-26)

• fixes dropdown mouse click to scroll
• fixes whitelist of strings suggestions list HTML
• fixes focus after clicking a suggestion item with the mouse
• added "searchBy" property support for whitelist alias filtering

v2.15.0 (2019-03-27)

• Bugfix

v2.14.0 (2019-02-27)

• fixed removeTag is not working.

v2.13.0 (2019-02-26)

• Deleting (backspacing) current tag input to the end, makes subsequent input change into tag immediately

v2.12.6 (2019-02-24)

• Bugfix

v2.12.1 (2019-02-15)

• Add duplicates in mix mode if duplicates setting false.

v2.11.1 (2019-01-27)

• Add duplicates in mix mode if duplicates setting false.
• Fixed placeholder does not update when changing dropdown active item using down arrow

v2.10.1 (2019-01-03)

• Make blacklist works case-insensitive

v2.9.7 (2018-12-30)

• Fixed Error when clicking outside of dropdown 

v2.9.1 (2018-12-17)

• Changed the "input" event parameter to be a string (value) instead of an Object {value:value}

v2.9.0 (2018-12-16)

• added custom "click" event

v2.8.6 (2018-12-14)

• Bugfix

v2.8.5 (2018-12-10)

• minor fix for editable tags blur event not working property

v2.8.4 (2018-12-09)

• fixed: edit tag not running tag validation

v2.8.2 (2018-11-18)

• Fixed an issue while pre-populating an unique numeric tag

v2.7.6 (2018-11-18)

• Bugfix

v2.6.5 (2018-11-03)

• Fixed: Duplicates tag in Internet Explorer if tag has "@" symbol and delimiter is space bar.

v2.6.3 (2018-10-27)

• "input" event wasn't triggered in the optimal place. should be triggered after this.input.set
• "filterListItems" method should not strip whitespaces

v2.6.0 (2018-10-12)

• Bugfixes

v2.5.1 (2018-10-06)

• Bugfixes

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.