Javascript keywords and tags input

The jSuites.tags is a very light javascript tags or keywords management web component and plugin. It allows 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

Keywords management

Basic keywords management input as a javascript web component.

<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
onbeforepaste Method executed before the paste data is appended.
(HTMLElement element, Object instance, Array data) => 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
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

More examples