Discover how to effortlessly create a customizable Tags component using the Tagify library, optimized for various frameworks.

Table of Contents

• Installation
• Basic Usage Examples
• Debugging
• Features
• Building the Project
• Output Value
• Ajax Whitelist
• Validations
• Drag & Sort

Installation

Option 1 – Import from CDN:

Include these lines in your HTML to load Tagify directly from a CDN:

Option 2 – Import as a Node module:

For those using Node.js, install Tagify via npm:

npm i @yaireo/tagify --save

Basic Usage Examples

To use Tagify, you’ll want to integrate it into your application as follows:

import Tagify from '@yaireo/tagify';

var inputElem = document.querySelector('input'); // The input element that will become a Tagify component
var tagify = new Tagify(inputElem, {
    whitelist: ["foo", "bar", "baz", "0", "1", "2"]
});

This example showcases how you convert a standard input field into a Tags component, complete with a whitelist of selectable tags.

Debugging

If you run into issues, enable debugging with:

window.TAGIFY_DEBUG = true;

This will allow you to see console warnings that can help identify problems.

Features

Here are some of the standout features of Tagify:

• Supports input and textarea elements.
• Allows dynamic suggestions and validations.
• Enables customizable HTML templates for complete control over the output.
• Includes a flexible settings object for easy adjustments.
• Facilitates AJAX-based whitelists for dynamic tag suggestions.

Building the Project

To build the project, run Gulp in your terminal. The source files are located in the ‘src’ folder, and the output will automatically generate in the ‘dist’ folder.

Output Value

You can extract the values of your tags in two ways:

1. Using the Tagify instance: tagify.value
2. Extracting from the original input: inputElem.value

Ajax Whitelist

To use an AJAX-based whitelist, implement the following pattern:

fetch('http://get_suggestions.com?value=' + value)
    .then(response => response.json())
    .then(newWhitelist => {
        tagify.whitelist = newWhitelist;
    });

This allows for a dynamic updating of suggested tags as the user types.

Validations

To set validation on the tags, you can specify a regex pattern or a validation function. This ensures that users only enter valid tags, improving the overall quality of input.

Drag & Sort

To enable sorting functionality, you would need to implement a third-party drag-and-drop library and then bind it to your Tagify component.

var dragsort = new DragSort(tagify.DOM.scope, {
    selector: '.tagify__tag',
    callbacks: {
        dragEnd: onDragEnd
    }
});

function onDragEnd(elm) {
    tagify.updateValueByDOMTags();
}

Troubleshooting

If you encounter issues while using Tagify, consider the following troubleshooting tips:

• Ensure Tagify CSS is included in your project to avoid styling issues.
• Check the console for any error messages that may provide hints on what’s going wrong.
• Verify that your whitelist items are correctly structured if you’re using objects.
• If AJAX requests return no suggestions, test the endpoint directly to ensure it is functioning.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.