InputTags Plugin With JavaScript Vanilla and Tokening – jSuites.js

Form
Demo    Download
Javascript Vanilla Tagging and Tokening Plugin
File Size: 67.04 KB
Views Total: 731 views
Last Update:April 12, 2021
Publish Date: May 08, 2019
Official Website: Go to website
License: MIT
Plugin Author: jsuites

jSuites tagging of the javascript vanilla plugin is such a unique and lucid tagging and tokening plugin which is lightweight, sensitive and mobile compatible. A user can get a privilege to enhance the default select box that offers endless attributes such as finding, sorting, tagging, unit selection, multi-opt, auto-fill and active AJAX content.
Either an individual can create a tag just by writing in the search bar or select some component from the drop-down list which makes the automatic tags for them. 

Table of Contents

How to use it :

Add Java Script & CSS file :

<script src="/jsuites/v2/jsuites.js"></script>
<script src="jsuites/v2/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="/jsuites/v2/jsuites.css" type="text/css" />

Add Html Structure :

<div id="tags1"></div>

Call with javaScript:

<script>
jSuites.tags(document.getElementById('tags1'));
</script>

METHODS :

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

EVENTS

onbeforechangeTrigger a method before a value is changed.onchangeTrigger a method when value is changed.onfocusTrigger a method when element is focusedonblurTrigger a method when element is bluredonloadTrigger a method when element is loaded

INITIALIZATION OPTIONS

var defaults = {
    // Optional placeholder
    placeholder: null,
    // Method to parse the tags
    valid: null,
    // Remote resource url for search
    search: null,
    // Initial value
    value: null,
    // Events
    onbeforechange: null,
    onchange: null,
    onfocus: null,
    onblur: null,
    onload: null,
    colors: null,
};
Done

List Of Version :
  • v4.4.2
  • v3.9.9
  • v3.7.0
  • v3.5.0
  • v3.1.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.