A new version of the jSuites JavaScript Dropdown plugin is available here.

JavaScript Dropdown

JavaScript Dropdown Quick Reference

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="dropdown"></div>

<script>
var dropdown = jSuites.dropdown(document.getElementById('dropdown'), {
    url: '/docs/large',
    autocomplete: true,
    multiple: true,
    width: '280px',
});
</script>
</html>

Methods

Method	Description
dropdown.open();	Open the dropdown
dropdown.close(boolean);	Close the dropdown @param int ignoreEvents - Do no execute onclose event
dropdown.getText();	Get the current label(s) from the selected option(s) in the dropdown
dropdown.getValue();	Get the current value(s) from the selected option(s) in the dropdown
dropdown.setValue(string\|array);	Set a new value(s) @param mixed newValue - A string value or an array with multiple values in case a multiple dropdown.
dropdown.reset();	Clear all selected options from the dropdown
dropdown.add();	Add a new element to the dropdown
dropdown.setData(mixed);	Set the data to load into the dropdown
dropdown.getData();	Get the dropdown loaded data
dropdown.setUrl(string, function);	Change the url from which data is obtained. @param {string} url @param {function} callback
dropdown.getPosition(string);	Get the position of the option owner of the informed value
dropdown.selectIndex(int);	Select an item based on its position

Events

Method	Description
onopen	Trigger a method when the dropdown is opened. (DOMElement element) => void
onclose	Trigger a method when the dropdown is closed. (DOMElement element) => void
onchange	Trigger a method when value is changed. (DOMElement element, Number index, String oldValue, String newValue, String oldLabel, String newLabel) => void
onfocus	Trigger a method when the dropdown get focus. (DOMElement element) => void
onblur	Trigger a method when the dropdown lost focus. (DOMElement element) => void
onbeforeinsert	Before a new item is added. (Object instance, Object item) => void
oninsert	Trigger a method when a new option is added to the dropdown. (Object instance, Object item, Object dataItem) => void
onload	Trigger a method when the dropdown is loaded. (DOMElement element, Object instance, Array data, String currentValue) => void

Initialization options

Property	Description
data: Array	Array of items to be loaded into the dropdown
url: string	Can be loaded from a external file
multiple: boolean	Multiple options
autocomplete: boolean	Allow autocomplete
type: string	Render type: default \| picker \| searchbar
width: string	Default width
value: string	Selected value
placeholder: string	Placeholder instructions
newOptions: boolean	Enable the add new option controls
lazyLoading: boolean	Activate the lazy loading feature
format: 0\|1	Format of the data. 0: { text, value }, 1: { id, name }. Default: 0

Dropdown Items

Each option in the dropdown is define by one object and the possible attributes are the following:

Property	Description
value: mixed	Value of the item. Default format.
text: string	Label of the item. Default format.
id: mixed	Value of the item. Can be used when the property format = 1
value: string	Label of the item. Can be used when the property format = 1
title: string	Description of the item
tooltip: string	On mouse over instructions
image: string	Icon of the item
group: string	Name of the group where the item belongs to
synonym: array	Keywords to help finding one item
disabled: boolean	Item is disabled
color: number	Color for the item
icon: string	Material icon keyword

Edit this page on GitHub