Tiny Text Field Based Tags Input Plugin - 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, 

  // false or null will disallow editing
  editTags: {{
    clicks: 2, // Number of clicks to enter "edit-mode": 1 for single click. Any other value is considered as double-click
    keepInvalid: true, 
  }},

  // 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: function(){},

  // 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(){},

  // if the pattern setting does not meet your needs, use this function, which recieves tag data object as an argument and should return true if validaiton passed or false/string of not
  // a string may be returned as the reason of the validation failure.
  validate: 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
// e.g. addTags(["banana", "orange", "apple"])
// or addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])
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:

v4.1.1 (2021-04-25)

• [feat] when "a11y.focusableTags" setting is true, allows editing tags by pressing "enter" key

v4.1.0 (2021-04-25)

• Bugs fixed

v4.0.5 (2021-04-16)

• fixed: mix mode now support loading animation
• improved "mix mode" section with settings example
• cleaned unwanted props also in mix-mode when updating original field's value

v4.0.4 (2021-04-11)

• fixed: apparently without the setTimeout, if another Tagify was "under" the selected suggestion, it will gain focus 46ad4e5
• fixed: added __tagId property to each data item on the this.value and also on the tag elements themselves, so they could be matched to the correct item in the this.value

v4.0.3 (2021-04-06)

• added dropdown:updated support in the React Wrapper

v4.0.2 (2021-04-05)

• fixed: changed the propTypes for "children" in the React Wrapper
• fixed: added all missing custom event listeners to the React wrapper
• fixed: React wrapper now exports MixedTags correctly

v4.0.1 (2021-04-03)

• fixesed: updated addTags to use DOM fragment for better performance when adding tons of tags at-once (copy=paste)
• improved filtering suggestions for "select" mode: if a tag was chosen, do not filter by value until the tag is erased or was edited. if tag is edited so all characters removed, then the field blured - the tag is now removed. Also when editing the text and bluring, the tag is updated.
• improved demo for "select" mode
• makes more sense to use "auto" since the X button should be to the right (in LTR)
• fixesed: Can't make tagTextProp work when mode select is set

v4.0 (2021-03-30)

• improved controlled-component ability by better comparing between current value and new value
• changed how the original input is un-hidden
• fixed: Browser shows console error when submitting a form with a "required" tagified input element which is empty

v3.25.0 (2021-03-30)

• improved controlled-component ability by better comparing between current value and new value
• changed how the original input is un-hidden
• fixes: Browser shows console error when submitting a form with a "required" tagified input element which is empty

v3.25.0 (2021-03-29)

• fixed: Previous tag is deleted when quickly pressing backspace and typing new text
• fixed: added "suggestionClick" hook to the "enter" key down event, while sending the tag's data to the hook's function
• fixed: added deep compare to the React wrapper when the "value" changes (AKA "controlled")
• fixed: in "select" mode, when selecting an option, the dropdown will no longer show any of the other options

v3.23.1 (2021-03-08)

• fixed: line-height clipped certain fonts glyphs
• fixed: Method removeAllTags ignores the passed option withoutChangeEvent
• fixed:  tag somewhere in the middle of textarea and then put cursor to the end and press "DEL" then tag will be deleted
• fixed: Caret stretch to full parent height in contenteditable inline with inline first child element

v3.22.3 (2021-02-26)

• fixes when typing and bluring the text is not becoming red and then deletced after a while (if whilist is objects and enforceWhitelist is true)
• [FEAT] force dropdown to always open (be placed) above or below the input
• removed Angular port from repo and linked to a dedicated repo made by another developer
• fixes "navigator" not available in SSR
• [CHORE] updated dependencies

v3.22.3 (2021-02-14)

• fixed: when editing a tag, the "edit:beforeUpdate" should not deep-clone the data, so the developer could modify it at the event callback if it is wished to remove/add other properties to the edited tag before the tag is replaced, therefore added a third option to the "trigger" event method
• fixed: when editing a tag which has other properties than "value" they should be persisted after editing
• Added a missing custom event
• fixed: Cannot read property 'withoutChangeEvent' of undefined
• fixed: typo 

v3.22.2 (2021-02-14)

• when filtering dropdown items, in case whitelist items do not contain any of the custom "mapValueTo" array strings, then use value instead 
• fix for whitelist of numbers a(not strings)
• fixes When using objects with "mapValueTo", typing tab to insert tag inserts value
• fixes Unable to insert tag containing "<x>" with tab key
• fixes dropdown border bottom in chrome
• fixes Clicking on The Drop-Down Scroll Closes the Dropdown 
• support for multiple class names in settings.classNames properties
• fixes loadOriginalValues triggers multiple change event
• fixes last element stays in dropdown (when dropdown.position is "manual") 

v3.22.1 (2021-01-18)

• [FEAT] add select & mix namespace classnames to the settings.classNames object
• [BUGFIX] TAB key does nothing in single-value mode with text entered
• [BUGFIX] Cannot read property 'insertBefore' of null
• [BUGFIX] when using "tagTextProp" setting, and typing a tag, without a whitelist, "value" property is set to "undefined"

v3.22.0 (2020-12-27)

• [FEAT] Programmatically adding tags in mix-mode
• In Mix mode, newly created tags are deleted when pressing backspace at the start of textbox
• [CHORE] added an item to the FAQ list after somebody asked a question
• [BUGFIX] autofocus React Component
• [BUGFIX] [React - Mixed mode] remove tag after starting in read-only
• [BUGFIX] Setting non-default mixTagsInterpolator fails to parse out tags
• [BUGFIX] Programmatically adding tags in mix-mode throws an error
• [BUGFIX] Check native support for promises in polyfill
• add "np" package to streamline publishing 0d1a8cd
• demo page minor changes to head tag children
• [BUGFIX] if "dropdownItemNoMatch" template is used, and the item is clicked, the dropdown won't close even if clicked outside afterwards
• Replaced demo settings with Knobs - changed H2 titles color to match the logo color
• [BUGFIX] regarding mix-mode custom whitelist text prop (not "value")
• [BUGFIX] mix-mode fixes for complex whiteilst where values are ids and another property is used as the text of the tags/suggestions
• [BUGFIX] - minor fix related to "sameStr" helper function
• [BUGFIX] [Chrome Android] cannot delete mix-mode tags using the keyboard "backspace" key
• [BUGFIX] If tag value ends with space whitelist not working
• added new "validate" function to settings, for more complex validations which pattern cannot solve
• [BUGFIX] When using dropdown.mapValueTo option the original whitelist data structure changes

v3.21.3 (2020-11-23)

• [BUGFIX] if "dropdownItemNoMatch" template is used, and the item is clicked, the dropdown won't close even if clicked outside afterwards

v3.21.3 (2020-11-11)

• made "this.trim" error-proof for "undefined" values

v3.21.0 (2020-11-06)

• when editing, on blur, add an extra parameter to "transformTag" with the preivous data object

v3.20.3 (2020-10-25)

• fixed cannot create mix-text tags

v3.20.2 (2020-10-25)

• fixed mix-mode readonly did not hide tags (x) button

v3.20.1 (2020-10-24)

• fixed a TON of mix-mode delete/backspace issues, many with readonly-tags
• removed empty textnodes inside tag template, which affected caret placement at some situations
• added "removeTextChildNodes" & "getfirstTextNode" helpers
• fixed an issue with restoring multiple readonly tags which were deleted by the browser (range-selection)

v3.20.0 (2020-10-08)

• Minor changes.

v3.19.7 (2020-10-06)

• Fixed edited tag with custom template to be able to revert back

v3.19.5 (2020-10-05)

• pasting text in non-empty input should use all text and not just the pasted part

v3.19.4 (2020-10-01)

• "onEditTagBlur" should keep any pre-defined properties of the tag's data

v3.19.2 (2020-09-28)

• fixed: whitelist items with commas should't be splitted to seperate tags

v3.19.1 (2020-09-26)

• fixed: Mixed mode - Backspace issue

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 &nbsp;

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.