Text Field Based Tags Input Plugin For jQuery – Tagify

Form
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.

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:

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
$('[name=tags]').tagify();

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

$('[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 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
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(); 

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

Done

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

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.