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:

v3.2.6 (2020-01-07)

• Bugs fixed

v3.2.3 (2019-12-23)

• Wrong value after edit/update a tag

v3.2.2 (2019-12-21)

• minor changes

v3.2.0 (2019-12-19)

• minor changes

v3.0.0 (2019-12-13)

• minor changes

v2.31.6 (2019-11-21)

• Bugfix

v2.31.4 (2019-11-16)

• Fixed Callback when removing a tag with backspace

v2.31.3 (2019-11-04)

• Fixed Callback when removing a tag with backspace

v2.31.2 (2019-10-14)

• Minor update

v2.31.1 (2019-10-14)

• Mix Mode Cursor Position on trying to delete a Tag using Backspace key.

v2.29.1 (2019-10-07)

• Do not normalize input value in "mixed" mode, to allow full control over the textarea to the developer, if anyone wishes their users to be able to do anything within the textarea or to control it outside of tagify.

v2.29.0 (2019-09-24)

• minor CSS bugfix.

v2.28.2 (2019-09-14)

• CSS bugfix.

v2.28.0 (2019-09-12)

• CSS bugfix.

v2.26.3 (2019-09-02)

• Fixed: Empty tag (via editing) *is* invalid, but remains, even with `keepInvalidTags: false`

v2.26.2 (2019-08-31)

• Fixed: Safari (11.1.2): Can't edit tags (includes proposed fix)

v2.26.1 (2019-08-31)

• Cleanup annoying "[addTags] no tags to add: Array []" console warning

v2.26.0 (2019-08-29)

• Fixed Syntax error in React wrapper compilation

v2.25.3 (2019-08-28)

• bugfix: when clicking anywhere on the screen there was an error in the console

v2.25.2 (2019-08-24)

• Fixed: conflict "RENDER SUGGESTIONS LIST MANUALLY" Property with "TEXTAREA"
• Fixed: Pasted text separated with new line symbol doesn't process correct

v2.24.0 (2019-08-18)

• Remove "hasMaxTags" class when limit is not reached anymore

v2.23.1 (2019-07-30)

• Remove "hasMaxTags" class when limit is not reached anymore

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.