Tagify

Overview

Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features For full documentation please check the plugin's site.

Usage

Tagify's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:

<link href="https://advcloudfiles.advantech.com/design/internal-site-ui-3.0/dist/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="https://advcloudfiles.advantech.com/design/internal-site-ui-3.0/dist/assets/plugins/global/plugins.bundle.js"></script>

Basic

Basic example of Tagify attached to an input element:

Default input style

JAVASCRIPT
HTML

// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_1");
var input2 = document.querySelector("#kt_tagify_2");

// Initialize Tagify components on the above inputs
new Tagify(input1);
new Tagify(input2);

<div class="mb-10">
<label class="form-label">Default input style</label>
<input class="form-control" value="tag1, tag2, tag3" id="kt_tagify_1"/>
</div>

Countries With Flags

Initialize Tagify programmatically and control the country flags via Javascript.

Country Tags

JAVASCRIPT
HTML

var tagify = new Tagify(document.querySelector('#kt_tagify_country'), {
delimiters: null,
templates: {
tag: function (tagData) {
const countryPath = 'assets/media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
try {
// _ESCAPE_START_
return `<tag title='${tagData.value}' contenteditable='false' spellcheck="false"
class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
	<x title='remove tag' class='tagify__tag__removeBtn'></x>
	<div class="d-flex align-items-center">
		${tagData.code ?
	`<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2" src='${countryPath}' />` : ''
}
		<span class='tagify__tag-text'>${tagData.value}</span>
	</div>
</tag>`
// _ESCAPE_END_
}
catch (err) { }
},

dropdownItem: function (tagData) {
const countryPath = 'assets/media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
try {
// _ESCAPE_START_
return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
		<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2"
				src='${countryPath}' />
		<span>${tagData.value}</span>
	</div>`
// _ESCAPE_END_
}
catch (err) { }
}
},
enforceWhitelist: true,
whitelist: [
{ value: 'Afghanistan', code: 'AF' },
{ value: 'Aland Islands', code: 'AX' },
{ value: 'Albania', code: 'AL' },
{ value: 'Algeria', code: 'DZ' },
{ value: 'American Samoa', code: 'AS' },
...
],
dropdown: {
enabled: 1, // suggest tags after a single character input
classname: 'extra-properties' // custom class for the suggestions dropdown
} // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
})

// add the first 2 tags and makes them readonly
var tagsToAdd = tagify.settings.whitelist.slice(0, 2);
tagify.addTags(tagsToAdd);

<label class="form-label">Country Tags</label>
<input class="form-control d-flex align-items-center" value="" id="kt_tagify_country" />

Sizes

Apply the standard Bootstrap input sizes .form-control-smand .form-control-lg:

Small size

Default size

Large size

JAVASCRIPT
HTML

// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_3");
var input2 = document.querySelector("#kt_tagify_4");
var input2 = document.querySelector("#kt_tagify_5");

// Initialize Tagify components on the above inputs
new Tagify(input1);
new Tagify(input2);
new Tagify(input3);

<input class="form-control form-control-sm" value="tag1, tag2, tag3" id="kt_tagify_3"/>
<input class="form-control" value="tag1, tag2, tag3" id="kt_tagify_4"/>
<input class="form-control form-control-lg" value="tag1, tag2, tag3" id="kt_tagify_5"/>

Suggestions

A dropdown with suggestions will appear immediately when Tagify has focus.

Inline Suggestions

List Suggestions

JAVASCRIPT
HTML

// The DOM elements you wish to replace with Tagify
var input = document.querySelector("#kt_tagify_6");
var input = document.querySelector("#kt_tagify_7");

// Initialize Tagify script on the above inputs
new Tagify(input, {
whitelist: ["Ada", "Adenine", "Agda", "Agilent VEE"],
maxTags: 10,
dropdown: {
maxItems: 20,           // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0,             // <- show suggestions on focus
closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
}
});

new Tagify(input, {
whitelist: ["Ada", "Adenine", "Agda", "Agilent VEE"],
maxTags: 10,
dropdown: {
maxItems: 20,           // <- mixumum allowed rendered suggestions
classname: "", // <- custom classname for this dropdown, so it could be targeted
enabled: 0,             // <- show suggestions on focus
closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
}
});

<input class="form-control" value="css, html, javascript" id="kt_tagify_6"/>

<input class="form-control" value="css, html, javascript" id="kt_tagify_7"/>

External Suggestions

Allows to select suggestions from an external container.

External Suggestions

Suggested: Bootstrap, Angular, React, Vue

JAVASCRIPT
HTML

var input = document.querySelector('#kt_tagify_custom'),

// Init Tagify script on the above inputs
tagify = new Tagify(input, {
whitelist: ["Bootstrap", "Angular", "React", "Vue"],
placeholder: "Type something",
enforceWhitelist: true
});

// Suggestions
var suggestions = document.querySelector('#kt_tagify_custom_suggestions');

// Suggestion item click
KTUtil.on(suggestions,  '[data-kt-suggestion="true"]', 'click', function(e) {
tagify.addTags([this.innerText]);
});

<div class="mb-0">
<label class="form-label">External Suggestions</label>
<input class="form-control" value="Bootstrap" id="kt_tagify_custom"/>
<div class="pt-3">
<span class="text-gray-700">Suggested:</span>

<span class="text-danger" id="kt_tagify_custom_suggestions">
<span class="cursor-pointer" data-kt-suggestion="true">Bootstrap</span>,
<span class="cursor-pointer" data-kt-suggestion="true">Angular</span>,
<span class="cursor-pointer" data-kt-suggestion="true">React</span>,
<span class="cursor-pointer" data-kt-suggestion="true">Vue</span>
</span>
</div>
</div>

Readonly Mode

If the original input field has a readonly attribute, then, via CSS, there will be no way of manually adding tags because the inline contenteditable element will be hidden.

Example

JAVASCRIPT
HTML

// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_8");

// Initialize Tagify components on the above inputs
new Tagify(input1);

<input class="form-control" value="css, html, javascript" readonly id="kt_tagify_8"/>