Press "Enter" to skip to content

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

Input Tagify Component, it converts an input field or text area into a tag component, in an easy and customizable way, with great performance and a small code footprint full of features.

Tagify is a tiny jQuery plugin used to generate an easy, animated, high-performance tag / token enter from both enter area or textarea.

Features:

  • Auto-stop duplicate tags.
  • Auto cut up enter textual content into tags by comma or Enter key.
  • Compatible with Bootstrap Four and Bootstrap 3.

How to make use of it – How to get values of jQuery Tags Input plugin

1. Put the principle model sheet tagify.css within 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 may also embody the vanilla JS model if you would like to implement the Tagify in pure JavaScript.

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

4. Create a standard enter area or text field for the tag enter. You can set the predefined tags within the worth attribute as observe:

<enter identify="tags" placeholder="write some tags" worth="predefined tags right here">

5. Initialize the Tagify and achieved.

// jQuery
$('[name=tags]').tagify();

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

6. Enable duplicate detection.

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

7. More configuration choices.

$('[name=tags]').tagify({

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

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

  // most variety of tags
  maxTags: Infinity, 

  // uncovered callbacks object to be triggered on sure occasions
  callbacks: {}, 

  // routinely provides the textual content which was inputed as a tag when blur occasion occurs
  addTagOnBlur: true, 

  // enable tuplicate tags
  duplicates: false, 

  // is that this listing has any objects, then solely enable tags from this listing
  whitelist: [], 

  // an inventory of non-allowed tags
  blacklist: [], 

  // ought to ONLY use tags allowed in whitelist
  enforceWhitelist: false, 

  // tries to autocomplete the enter's worth whereas typing
  autoComplete: true, 

  // String - when tags have a number of properties, and for every tag one other property ought to be used moreover the "worth"
  mapValueToProp: "", 

  dropdown: 
  
});

8. API strategies.

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

// provides new tag
// String (word, single or a number of with a delimiter) or an Array of Objects
myInput.addTags();

// removes a particular 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
})

input tag in HTML, Tiny Text Field-Based Tags Input Plugin


See Demo And Download

Official Website(yairEO): Click Here

This superior jQuery/javascript plugin is developed by yairEO. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *