Javascript keywords and tag input plugin

The jSuites.tags is a very light javascript webcomponent and plugin to allow users to insert and manage multiple entries of tags or keywords into a text input. Several applications can benefit from this plugin, such as:

Keyword, tags and categories input box
Destination email box
CRM/CMS systems
SEO management tags and keywords systems

Bring your interface to the next level with the great performance and usability of this JavaScript keywords and tags management plugin.

Examples

Basic webcomponent example

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<jsuites-tags value="Canada,US,UK"></jsuites-tags>

<script>
document.querySelector('jsuites-tags').addEventListener('onblur', function() {
    console.log('Tags' + this.value);
});
</script>
</html>

Gmail-like email input with validations

The email input works with remote suggestions and respond to the keyboard actions.

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id='tag-input'></div>

<script>
jSuites.tags(document.getElementById('tag-input'), {
    validation: function(element, text, value) {
        if (! value) {
            value = text;
        }
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var test = re.test(String(value).toLowerCase()) ? true : false;
        return test;
    },
    search: '/v4/data?q=',
    placeholder: 'To'
});
</script>
</html>

Documentation

Available Methods

Method	Description
tags.getData();	Get all tags as a object
tags.getValue(number)	Get a specific tag by index or all tags value @param integer indexNumber - Null for all tags
tags.setValue(string);	Set a new value for the javascript tagging @param string newValue - Values separate by comma
tags.reset();	Clear all tags
tags.isValid();	Validate tags

Available events

Method	Description
onbeforechange	Method executed before a value is changed. (HTMLElement element, Object instance, String value) => string
onchange	Method executed when a value is changed. (HTMLElement element, Object instance, String value) => void
onfocus	Method executed when the input is focused. (HTMLElement element, Object instance, String currentValue) => void
onblur	Method executed when the input is focused. (HTMLElement element, Object instance, String currentValue) => void
onload	Method executed the DOM element is ready. (HTMLElement element, Object instance) => void

Initialiation settings

Property	Description
value: string \| array	Initial value of the compontent. An string separate by comma or an array of objects.
limit: number	Max number of tags inside the element
search: string	The URL for the remote suggestions
placeholder: string	The default instruction text on the element
validation: function	Method to validate the entries in the input. (HTMLElement element, String value, Number id) => boolean