tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of features.

Modify the original input value format

The default format is a JSON string:
'[{"value":"cat"}, {"value":"dog"}]'

I recommend keeping this because some situations might have values such as addresses (tags contain commas):
'[{"value":"Apt. 2A, Jacksonville, FL 39404"}, {"value":"Forrest Ray, 191-103 Integer Rd., Corona New Mexico"}]'

Another example of complex tags state might be disabled tags or ones with custom identifier class:
(tags can be clicked, so developers can choose to use this to disable/enable tags)
'[{"value":"cat", "disabled":true}, {"value":"dog"}, {"value":"bird", "class":"color-green"}]'

Ajax whitelist

A dynamically loaded list of suggestions (whitelist) from the server (depending on user types) is a recurring need for many.

Tagify comes with its own loading animation, and it’s very lightweight CSS-only code, and the loading state is controlled by the method tagify.loading which accepts true or false as arguments.

persistent data

Sometimes the whitelist may be loaded asynchronously, thus any pre-filled value in the original input field will be removed if forceceWhitelist is set to true.

Edit tags

Tags that are not read-only can be edited by double-clicking them (by default) or by changing the Edit Tags setting to 1, which makes the tags editable by clicking them once.

Validations

For “regular” tags (not blend mode or select mode), the easiest way is to use the style setting and use a Regex, or apply the style attribute directly to the input that will be “transformed” to the Tagify component (for vanilla code where the input tag is fully accessible to developers).

If the setting style doesn’t meet your needs, use the validation set, which receives the tag data object as an argument and should return true if validation is passed, or false/string is not. A string may be returned as the reason for the validation failure, so it will be printed as the address attribute of the invalid tag.

Drag and sort

To be able to sort tags by dragging a third-party script is required.

DOM templates

It is possible to control the templates for some of the HTML elements that Tagify uses by modifying the settings.

Must Read: Tags Input Field Made With HTML/CSS and JavaScript

Features

• Can be applied to input & textarea elements
• Supports mixed content (text and tags together)
• Supports single-value mode (like <select>)
• Supports whitelisting/blacklist
• Customizable HTML templates for the different areas of the component (wrapper, tags, dropdown, dropdown item, dropdown header, dropdown footer)
• Shows suggestions list (flexible settings & styling) at full (component) width or next to the typed text (caret)
• Allows setting suggestions’ aliases for easier fuzzy-searching
• Auto-suggest input as-you-type with the ability to auto-complete
• Can paste in multiple values: tag 1, tag 2, tag 3 or even newline-separated tags
• Tags can be created by Regex delimiter or by pressing the “Enter” key/focusing on the input
• Validate tags by Regex pattern or by function
• Tags may be editable (double-click)
• ARIA accessibility support(Component too generic for any meaningful ARIA)
• Supports read-only mode to the whole component or per-tag
• Each tag can have any properties desired (class, data-whatever, read-only…)
• Automatically disallow duplicate tags (vis “settings” object)
• Has built-in CSS loader, if needed (Ex. AJAX whitelist pulling)
• Tags can be trimmed via hellip by giving max-width to the tag element in your CSS
• Easily change direction to RTL (via the SCSS file)
• Internet Explorer – A polyfill script should be used: tagify.polyfills.min.js (in /dist) (IE support has been dropped)
• Many useful custom events
• Original input/textarea element values kept in sync with Tagify

<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />

npm i @yaireo/tagify --save

import Tagify from '@yaireo/tagify'

var tagify = new Tagify(...)

See Demo And Download

Official Website(yairEO): Click Here

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