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 |