Text Field Based Tags Input Plugin For jQuery – Tagify

Demo    Download
File Size: 3.52 KB
Views Total: 1179 views
Last Update:April 13, 2021
Publish Date: October 13, 2016
Official Website: Go to website
License: MIT
Plugin Author: yairEO

Tagify is a small Inputag jQuery plugin used to add a multiple input tags straightforward, vivified, superior tag/token contribution from either input field or textarea. Changes an information field or a textarea into a Tags segment, in a simple, adjustable way, with extraordinary execution and little code impression, detonated with highlights. It additionally gives a vanilla JavaScript variant which permits you to actualize the labels contribution to unadulterated JavaScript.


  • 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:

Include the CSS, jQuery and JavaScript file  tagify in the head:

In the above code, they include “tagify.css” code and two JavaScript codes, “//code.jquery.com/jquerry.min.js” and “jQuery.tagify.js” into the existing code.

<link href="tagify.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.tagify.js"></script>

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

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

Create a input field or textfield with the tag input.

We created a tag input in the above code by assigning the name as a tag with a placeholder to write some tags and values predefined tags here.

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

Initialize the Tagify and done.

In the above code of jQuery, We initialized id the value name as tags([name=tags]) in the tagify function and the code of Vanilla JavaScript, and We again took inputs of tags as a name(input[name=tags]).

// jQuery

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

Enable the duplicate detection.

Here in this code, we declared duplicates of tagify as false.

More configuration option:

Placeholder: Example for this is, <input placeholder=’Please type your tags’>. Here, the attribute’s value will be used as a constant placeholder, and it is visible until something is being typed.

Pattern: Example for this is, <input pattern =’^[A-Za-z_* ]{1,15}$’>. Here, the attribute’s value will be used to validate the input.

readOnly: Example for this is, <input readOnly>. Here, No user interaction will be allowed.

Autofocus: An example of this is <input autofocus>. Here, Components are automatically focused when the component is loaded.

Required: An example of this is <input required>.

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

More configuration options.


  // 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 vali<a href="https://www.jquerypost.com/category/time-clock//">date</a> 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"
  <a href="https://www.jquerypost.com/tag/map/">map</a>ValueToProp: "", 

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

API methods.

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

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

// removes a specific tag

// removes all tags

// destroy the plugin

// converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags

// returns an Array of found matching items (case-insensitive)

// returns the index of a specific tag, by value

// returns the first matched tag node, if found

// returns how many tags already exists with that value

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

// returns a DOM nodes list of all the tags

// returns a specific tag DOM node by value

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

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

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

// toggles tagify--invalid class to the Tagify wrapper element

// adds all whitelist items as tags and close the suggestion dropdown

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


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

// e.type, e.detail, ...
.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


List Of Version :
  • v4.0.4
  • v4.0.3
  • v4.0.2
  • v4.0.1
  • v4.0.0
  • v3.25.0
  • v3.23.1
  • v3.23.0
  • v3.22.3
  • v3.22.2
  • v3.22.1
  • v3.22.0
  • v3.21.4
  • v3.21.3
  • v3.21.2
  • v3.21.1
  • v3.21.0
  • v3.20.3
  • v3.20.2
  • v3.20.1
  • v3.20.0
  • v3.19.7
  • v3.19.6
  • v3.19.5
  • v3.19.4
  • v3.19.3
  • v3.19.2
  • v3.19.1
  • v3.19.0
  • v3.18.1


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.