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

Change log:

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.