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({

  // tag data Object property which will be displayed as the tag's text
  tagTextProp: 'value',

  // placeholder text
  placeholder: '',

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

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

  // use 'select' for single-value dropdown-like select box
  // use 'mix' as value to allow mixed-content
  // use 'integrated' to skip the creation of the wrapper
  // the 'pattern' setting must be set to some character.
  mode: null,

  mixMode: {
    insertAfterTag: '\u00A0', // node or string to add after a tag added
  }

  // interpolation for mix mode
  // everything between these will become a tag
  mixTagsInterpolator: ['[[', ']]'],

  // define conditions in which typed mix-tags content is allowing a tag to be created after.
  mixTagsAllowedAfter: /,|\.|\:|\s/,

  // maximum number of tags
  maxTags: Infinity, 

  // number of clicks on a tag to enter "edit" mode
  // only 1 or 2 work. false or null will disallow editing
  editTags: 2

  // 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, 

  // trim the tag's value
  trim: true,

  // 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: {
    enabled: true,
    rightKey: false // If true, when → is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "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,
    caseSensitive: false,
    fuzzySearch: true,
    accentedSearch: true,
    position: 'null', // 'manual' - will not render the dropdown, and you would need to do it yourself; 'text' - will place the dropdown next to the caret; 'input' - will place the dropdown next to the input; 'all' - normal, full-width design
    highlightFirst: false,
    closeOnSelect: true,
    clearOnSelect: true,
    mapValueTo: function(){}, // this setting controlls which data key will be printed in the dropdown
    searchKeys: ["value", "searchBy"],
    appendTarget: document.body
  }

  // object consisting of functions which return template strings
  templates: {wrapper, tag, dropdownItem},

  // take a tag input as argument and returns a transformed value
  transformTag: undefined,

  // if true, do not remove tags which did not pass validation
  keepInvalidTags: false,

  // skip invald tags
  skipInvalid: false,

  // true - remove last tag; edit - edit last tag
  backspace: true,

  // if you wish your original input/textarea value property format to other than the default (which I recommend keeping) you may use this and make sure it returns a string.
  originalInputValueFormat: function(){},
  
});

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();

// converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags
myInput.loadOriginalValues(String/Array);

// returns an Array of found matching items (case-insensitive)
myInput.getWhitelistItemsByValue(Object);

// returns the index of a specific tag, by value
myInput.getTagIndexByValue();

// returns the first matched tag node, if found
myInput.getTagElmByValue();

// returns how many tags already exists with that value
myInput.isTagDuplicate();

// converts a String argument ([[foo]]⁠ and [[bar]]⁠ are..) into HTML with mixed tags & texts
myInput.parseMixTags();

// returns a DOM nodes list of all the tags
myInput.getTagElms();    

// returns a specific tag DOM node by value
myInput.getTagElmByValue();

// set/get tag data on a tag element (has.tagify__tag class by default)
myInput.tagData(HTMLElement, Object);

// goes to edit-mode in a specific tag
myInput.editTag( HTMLElement); 

// exit a tag's edit-mode. if "tagData" exists, replace the tag element with new data and update Tagify value
myInput.replaceTag(tagElm, Object (tagData));

// toogle loading state on/off (Ex. AJAX whitelist pulling)
myInput.loading();

// same as above but for a specific tag element
myInput.tagLoading(HTMLElement, Boolean);

// returns a tag element from the supplied tag data
myInput.createTagElem(Object (tagData));

// injects text or HTML node at last caret position. range parameter is optional
myInput.injectAtCaret(HTMLElement (injectedNode), Object (range)); 

// places the caret after a given node
myInput.placeCaretAfterNode(HTMLElement);

// whatever to insert after
myInput.insertAfterTag(HTMLElement (tag element), HTMLElement/String);

// toggles tagify--invalid class to the Tagify wrapper element
myInput.toggleInvalidClass();

// adds all whitelist items as tags and close the suggestion dropdown
myInput.dropdown.selectAll();

// iterates tag DOM nodes and re-build the tagify.value array (call this if tags get sorted manually)
parseTemplate String/Function (template name or function), Array (data) converts a template string (by selecting one from the settings.templates by name or supplying a template function which returns a String) into a DOM node
myInput.updateValueByDOMTags(); 

9. Events.

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

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

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

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

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

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

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

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

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

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

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

.on('edit:input', function(e){
  // on blur
})

.on('edit:beforeUpdate', function(e){
  // on blur
})

.on('edit:updated', function(e){
  // on blur
})

.on('edit:start', function(e){
  // on blur
})

.on('edit:keydown', function(e){
  // on blur
})

.on('dropdown:show', function(e){
  // on blur
})

.on('dropdown:hide', function(e){
  // on blur
})

.on('dropdown:select', function(e){
  // on blur
})

.on('dropdown:scroll', function(e){
  // on blur
})

.on('dropdown:noMatch', function(e){
  // on blur
})

Changelog:

v3.19.0 (2020-09-22)

• added "integrated" mode which skips the creation of the wrapper

v3.18.1 (2020-09-06)

• Fixed JS error when entering special characters
• Fixed: Make the tag search work with keywords, rather than a continuous string

v3.17.10 (2020-09-06)

• fuzzy-search refactored using Regex

v3.17.10 (2020-08-29)

• Fixed: when the dropdown is visible, with no item selected, and "tab" key is pressed & whitelist has objects, the first one is added.

v3.17.9 (2020-08-28)

• minor version bump

v3.17.3 (2020-08-11)

• Fixed: Editing tags with dropdown enabled is not saving the new value

v3.17.2 (2020-08-09)

• Bugfixed

v3.17.1 (2020-08-06)

• Bugfixed

v3.16.3 (2020-07-29)

• Fixed: Every tag entered adds  

v3.16.2 (2020-07-28)

• update

v3.15.4 (2020-07-20)

• dropdown position is now an attribute by itself and not a part of the class name
• dropdown position defaults to "all" if the viewport width is less, or equal, to 480px

v3.15.3 (2020-07-15)

• Fixed Tagify suggests undefined

v3.15.1 (2020-07-14)

• changed "dropdownItemNoMatch" template prop to be an Object instead of a String

v3.14.3 (2020-07-09)

• Fixed: Automatically close dropdown is not working

v3.14.2 (2020-07-07)

• Update

v3.13.0 (2020-07-03)

• Update

v3.12.0 (2020-06-28)

• Allow whitelist items to have a `value` type `Number` 

v3.11.3 (2020-06-22)

• Bugfix

v3.11.2 (2020-06-21)

• Fixed onChange is not called when clearing the last tag

v3.11.0 (2020-06-13)

• Add action button in suggestions dropdown items

v3.10.2 (2020-06-02)

• Allowed placing action-buttons inside the "dropdownItem" template so anything with a class "tagify__dropdown__item__action" will be ignored when clicking, and will not select that suggestion (but will trigger a "blur" event which will close the suggestions dropdown)

v3.9.2 (2020-05-19)

• Fixed: Mix text & tags - error when add a tag after deleted another one - IndexSizeError

v3.9.1 (2020-05-17)

• bug fix

v3.8.0 (2020-05-09)

• Fixed wrong value when paste the text in to input (Mix-mode)

v3.7.3 (2020-05-02)

• Bug fix

v3.7.2 (2020-04-28)

• Fixed Mixed Mode - Tags are in wrong order

v3.7.1 (2020-04-26)

• removed ARIA attributes from component wrapper element

v3.6.10 (2020-04-06)

• Bugs fixed

v3.6.6 (2020-04-04)

• Bugs fixed

v3.6.3 (2020-03-18)

• Bugs fixed

v3.6.1 (2020-03-05)

• Bugs fixed

v3.5.1 (2020-02-26)

• Bugs fixed

v3.4.1 (2020-02-08)

• Bugs fixed

v3.3.1 (2020-02-05)

• Bugs fixed

v3.3.0 (2020-01-26)

• Bugs fixed

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.