Star

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
onbeforechangeMethod executed before a value is changed.
(HTMLElement element, Object instance, String value) => string | false | undefined
onbeforepasteMethod executed before the paste data is appended.
(HTMLElement element, Object instance, Array data) => string | false | undefined
onchangeMethod executed when a value is changed.
(HTMLElement element, Object instance, String value) => void
onfocusMethod executed when the input is focused.
(HTMLElement element, Object instance, String currentValue) => void
onblurMethod executed when the input is focused.
(HTMLElement element, Object instance, String currentValue) => void
onloadMethod executed the DOM element is ready.
(HTMLElement element, Object instance) => void


Initialiation settings

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


More examples