09:43 7/6/26 JavaScript Tags
menu
Documentation keyboard_arrow_right Javascript tags
JavaScript Tags
The [Link] is a lightweight JavaScript Tags and Keywords input component for web
applications. This plugin streamlines the inputting and organizing of numerous tags or
keywords within a text input field. Its adaptability renders it an invaluable resource for a wide
array of uses, such as:
Input boxes for keywords, tags, and categories
Input validations
Destination email fields
CRM and CMS systems
SEO systems for managing tags and keywords
Documentation
Available Methods
The following methods are provided to facilitate the integration of the component with web
applications:
Method Description
getData(); Get all tags as a object
Get a specific tag by index or all tags value
getValue(number)
@param integer indexNumber - Null for all tags
Set a new value for the javascript tagging
setValue(string);
@param string newValue - Values separate by comma
reset(); Clear all tags
[Link] 1/6
09:43 7/6/26 JavaScript Tags
Method Description
isValid(); Validate tags
Available Events
These events allow for customized behaviour adjustments of the component:
Method Description
Method executed before a value is changed.
onbeforechange
(HTMLElement element, Object instance, String value) => string
Method executed before the paste data is appended.
onbeforepaste
(HTMLElement element, Object instance, Array data) => string
Method executed when a value is changed.
onchange
(HTMLElement element, Object instance, String value) => void
Method executed when the input is focused.
onfocus
(HTMLElement element, Object instance, String currentValue) => void
Method executed when the input is focused.
onblur
(HTMLElement element, Object instance, String currentValue) => void
Method executed the DOM element is ready.
onload
(HTMLElement element, Object instance) => void
Method executed when a item is removed.
onremoveitem
(String title, HTMLElement removedElement) => void
Initialization Settings
To initialize a new tag or keyword input element, configure the following settings:
Property Description
value: string | array Initial value of the component. A string separated by comma or an array of objects.
limit: number Max number of tags inside the element
[Link] 2/6
09:43 7/6/26 JavaScript Tags
Property Description
search: string The URL for the remote suggestions
placeholder: string The default instruction text on the element
Method to validate the entries in the input.
validation: function
(HTMLElement element, String value, Number id) => boolean
Examples
Keywords Management
Implement an essential keywords management input using the [Link] as a JavaScript
web component. This setup allows for efficient handling and organization of keywords within
a user-friendly input field, suitable for various applications such as content tagging, search
engine optimization tools, and metadata management.
Canada x US x UK x
[Link] 3/6
09:43 7/6/26 JavaScript Tags
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<jsuites-tags value="Canada,US,UK"></jsuites-tags>
<script>
[Link]('jsuites-tags').addEventListener('onblur',
function() {
[Link]([Link]);
});
</script>
</html>
Basic example
A basic javascript tags input component.
Canada x US x UK x
[Link] 4/6
09:43 7/6/26 JavaScript Tags
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='tag-input1' style="width: 320px"></div>
<script>
[Link]([Link]('tag-input1'), {
value: 'Canada,US,UK',
onblur: function() {
[Link](arguments)
}
});
</script>
</html>
Gmail-like Email Input
Set up a Gmail-like email input using [Link] that support validations and remote
suggestions optimized for keyboard interactions.
To
[Link] 5/6
09:43 7/6/26 JavaScript Tags
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='tag-input2' style="width: 320px"></div>
<script>
[Link]([Link]('tag-input2'), {
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 = [Link](String(value).toLowerCase()) ? true : false;
return test;
},
search: '/docs/data?q=',
placeholder: 'To'
});
</script>
</html>
Related Tools
JavaScript Input Mask - Excel-like input masks for forms
JavaScript Rich Forms - Form validation and change tracking
LemonadeJS Forms - Reactive form binding
Jspreadsheet CE - Free data grid with tag-like data entry
Jspreadsheet Pro - Advanced spreadsheet with custom editors
[Link] 6/6