<!-- CDN -->
												<script src="https://cdn.jsdelivr.net/npm/dual-listbox/dist/dual-listbox.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/vendor/forms/inputs/duallistbox.min.js"></script>
											
										

Then initialize via JavaScript:

											
												let dualListbox = new DualListbox("select"); // Selects the first selectbox on the page.
												let dualListbox = new DualListbox(".select"); // Selects the first element with the class 'select'
												let dualListbox = new DualListbox("#select"); // Selects the first element with the id 'select'

												let select = document.querySelector("#select");
												let dualListbox = new DualListbox(select); // Add a HTMLElement
											
										

You can also pass some options to the DualListbox:

											
												let dualListbox = new DualListbox("#select", {
													addEvent: function (value) {
														// Should use the event listeners
														console.log(value);
													},
													removeEvent: function (value) {
														// Should use the event listeners
														console.log(value);
													},
													availableTitle: "Different title",
													selectedTitle: "Different title",
													addButtonText: ">",
													removeButtonText: "<",
													addAllButtonText: ">>",
													removeAllButtonText: "<<",

													sortable: true,
													upButtonText: "ᐱ",
													downButtonText: "ᐯ",

													draggable: true,

													options: [
														{ text: "Option 1", value: "OPTION1" },
														{ text: "Option 2", value: "OPTION2" },
														{ text: "Selected option", value: "OPTION3", selected: true },
													],
												});

												dualListbox.addEventListener("added", function (event) {
													console.log(event);
													console.log(event.addedElement);
												});
												dualListbox.addEventListener("removed", function (event) {
													console.log(event);
													console.log(event.removedElement);
												});
											
										

											
												<!-- CDN -->
												<script src="https://unpkg.com/imask"></script>

												<!-- Load plugin -->
												<script src="assets/js/plugins/forms/inputs/imask.min.js"></script>
											
										

Then initialize via JavaScript:

											
												// Initialize
												var element = document.getElementById('selector');
												var maskOptions = {
													mask: '+{7}(000)000-00-00'
												};
												var mask = IMask(element, maskOptions);
											
										

IMask consists of two independent layers: model and view. Model layer contains all masking facilities which can be used independently without UI.

View layer is a glue between UI element and model, it connects listeners and controls changes in both directions.

Input processing is based on a simple idea of comparing states before and after change. State before change is obtained on keydown and on input actual processing takes place. In order to support older browsers manually call _saveSelection to save state and _onInput to handle changes. Pull requests for the beauty are welcomed.

To create new mask on element use:

											
												var mask = IMask(element, maskOptions);
											
										

Get/set value and unmasked value:

											
												mask.value = "+7(999)999-99-99";
												console.log(mask.value);  // "+7(999)999-99-99"
												console.log(mask.unmaskedValue);  // "79999999999"

												mask.unmaskedValue = "70000000000";
												console.log(mask.value);  // "+7(000)000-00-00"
												console.log(mask.unmaskedValue);  // "70000000000"
											
										

For typed masks like Number or Date it is possible to work with typed values. For untyped masks typedValue and unmaskedValue works identically.

											
												mask.updateOptions({mask: Number});
												mask.typedValue = 100;  // use number
												console.log(mask.value);  // "100"
												console.log(mask.unmaskedValue);  // "100"
												console.log(mask.typedValue);  // 100
											
										

Update options:

											
												mask.updateOptions({
													mask: Number,
													min: 0,
													max: 100
												});  // also updates UI
											
										

Clean and destroy:

											
												mask.destroy();
											
										

Listen to events:

											
												// 'accept' event fired on input when mask value has changed
												function log () {console.log(mask.value)};
												mask.on("accept", log);

												// 'complete' event fired when the value is completely filled
												// Note: this makes sense only for Pattern-based masks
												mask.on("complete", function () {console.log(mask.value)});
											
										

Stop listening to events:

											
												mask.off("accept", log);

												// omit handler argument to unbind all handlers
												mask.off("complete");
											
										

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/plugins/forms/inputs/maxlength.min.js"></script>
											
										

Then initialize via JavaScript:

											
												// Initialize
												$('input[maxlength]').maxlength({
													// options
												});
											
										

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/vendor/forms/inputs/passy.js"></script>
											
										

Then initialize via JavaScript:

											
												// Initialization example
												$('input').passy(function( strength, valid ) {

													// Set color based on validness and strength
													if(valid) {
														if( strength < $.passy.strength.HIGH) {
															color = 'orange';
														} else {
															color = 'green';
														}
													} else {
														color = 'red';
													}

													$(this).css('background-color', color);
												});
											
										

Generate a password of a specific length:

											
												// 'Generate method'
												$('input').passy('generate', 16);
											
										

Check if a field’s content is valid:

											
												// 'Valid' method
												if (
													$('input').passy('valid')
												)
												{ ... }
											
										

Load JavaScript file locally or from CDN:

											
												<!-- CDN -->
												<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/autoComplete.min.js"></script>

												<!-- Load library -->
												<script src="assets/js/vendor/forms/inputs/autocomplete.min.js"></script>
											
										

Create element:

											
												<!-- Autocomplete element -->
												<input type="search" class="form-control" id="autocomplete_basic" autocomplete="new-search" placeholder="Search country">
											
										

Then initialize via JavaScript:

											
												const autocompleteBasic = new autoComplete({
													selector: "#autocomplete_basic",
													data: {
														src: autocompleteData
													},
													resultItem: {
														highlight: true
													},
													events: {
														input: {
															selection: function(event){
																const selection = event.detail.selection.value;
																autocompleteBasic.input.value = selection;
															}
														}
													}
												});
											
										

init()

											
												autoCompleteJS.init();
											
										

start(query)

											
												autoCompleteJS.start("tea");
											
										

search(query, record, options)

autoComplete.js powerful search engine:

											
												autoCompleteJS.search(query, record, options);

												// Or

												autoComplete.search(query, record, options)
											
										

open()

Opens resultsList if not empty

											
												autoCompleteJS.open();
											
										

next()

Navigates to the next resultItem on the list

											
												autoCompleteJS.next();
											
										

previous()

Navigates to the previous resultItem on the list

											
												autoCompleteJS.previous();
											
										

goTo(index)

Navigates to a specific resultItem on the list by its index number

											
												autoCompleteJS.goTo(1);
											
										

select(index)

Selects a resultItem from the list by its index number

											
												autoCompleteJS.select(1);
											
										

close()

Closes the resultsList if opened

											
												autoCompleteJS.close();
											
										

unInit()

Removes all the event listeners on the events list

											
												autoCompleteJS.unInit();
											
										

init

Fires after autoComplete.js engine is initialized and ready

											
												document.querySelector("#autoComplete").addEventListener("init", function (event) {
													// "event.detail" carries the returned data values
													console.log(event);
												});
											
										

response

Fires after fetching the data is completed and the data is ready

											
												document.querySelector("#autoComplete").addEventListener("response", function (event) {
													// "event.detail" carries the returned data values
													console.log(event.detail);
												});
											
										

results

Fires after the search operation is done and matching results are ready

											
												document.querySelector("#autoComplete").addEventListener("results", function (event) {
													// "event.detail" carries the matching results values
													console.log(event.detail);
												});
											
										

open

Fires after the results list is opened

											
												document.querySelector("#autoComplete").addEventListener("open", function (event) {
													// "event.detail" carries the autoComplete.js "feedback" object
													console.log(event.detail);
												});
											
										

navigate

Fires on every "resultsList" navigation interaction

											
												document.querySelector("#autoComplete").addEventListener("navigate", function (event) {
													// "event.detail" carries the autoComplete.js "feedback" object
													console.log(event.detail);
												});
											
										

selection

Fires on result item selection

											
												document.querySelector("#autoComplete").addEventListener("selection", function (event) {
													// "event.detail" carries the autoComplete.js "feedback" object
													console.log(event.detail);
												});
											
										

close

Fires after "resultsList" is closed

											
												document.querySelector("#autoComplete").addEventListener("close", function (event) {
													// "event.detail" carries the autoComplete.js "feedback" object
													console.log(event.detail);
												});
											
										

Include the following lines of code in the <head> section of your HTML:

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/plugins/forms/validation/validate.min.js"></script>
											
										

Select a form to validate and call the validate method:

											
												<!-- Create form -->
												<form class="validate" id="commentForm" method="get" action="">
													<fieldset>
														<legend>Please provide your name, email address (won't be published) and a comment</legend>
														<p>
															<label for="cname">Name (required, at least 2 characters)</label>
															<input id="cname" name="name" minlength="2" type="text" required>
														</p>
													</fieldset>
												</form>
											
										

Finally call the plugin via JavaScript:

											
												// Basic initialization
												$("#commentForm").validate({
													// options
												});
											
										

Load JavaScript file locally or from CDN:

											
												<!-- Load plugin -->
												<script src="assets/js/vendor/forms/tags/tokenfield.min.js"></script>
											
										

Create an HTML element:

											
												<!-- Create element -->
												<input type="text" class="form-control tokenfield-basic" placeholder="Select car brand">
											
										

Finally call the plugin via JavaScript:

											
												// Basic initialization
												document.querySelectorAll('.tokenfield-basic').forEach(function(element) {
													const tfBasic = new Tokenfield({
														el: element,
														items: cars
													});
												});
											
										

Below you will find list of options which are related to remote autocomplete requests. Options are set as properties of an object assigned to remote property of the parent options object:

											
												new Tokenfield({
													remote: {
														url: "http://example.com",
														...
													}
												});