JavaScript dropdown

Quick reference

Considering the example below:

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

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

var dropdown = jSuites.dropdown(document.getElementById('dropdown'), {
    url: '/v4/large',
    autocomplete: true,
    multiple: true,
    width: '280px',


Method Description;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


Method Description
onopenTrigger a method when the dropdown is opened.
(DOMElement element) => void
oncloseTrigger a method when the dropdown is closed.
(DOMElement element) => void
onchangeTrigger a method when value is changed.
(DOMElement element, Number index, String oldValue, String newValue, String oldLabel, String newLabel) => void
onfocusTrigger a method when the dropdown get focus.
(DOMElement element) => void
onblurTrigger a method when the dropdown lost focus.
(DOMElement element) => void
onbeforeinsertBefore a new item is added.
(Object instance, Object item) => void
oninsertTrigger a method when a new option is added to the dropdown.
(Object instance, Object item, Object dataItem) => void
onloadTrigger a method when the dropdown is loaded.
(DOMElement element, Object instance, Array data, String currentValue) => void

Initialization options

Property Description
data: ArrayArray of items to be loaded into the dropdown
url: stringCan be loaded from a external file
multiple: booleanMultiple options
autocomplete: booleanAllow autocomplete
type: stringRender type: default | picker | searchbar
width: stringDefault width
value: stringSelected value
placeholder: stringPlaceholder instructions
newOptions: booleanEnable the add new option controls
lazyLoading: booleanActivate the lazy loading feature
format: 0|1Format of the data. 0: { text, value }, 1: { id, name }. Default: 0


Each option in the dropdown is define by one object and the possible attributes are the following:
Property Description
value: mixedValue of the item. Default format.
text: stringLabel of the item. Default format.
id: mixedValue of the item. Can be used when the property format = 1
value: stringLabel of the item. Can be used when the property format = 1
title: stringDescription of the item
tooltip: stringOn mouse over instructions
image: stringIcon of the item
group: stringName of the group where the item belongs to
synonym: arrayKeywords to help finding one item
disabled: booleanItem is disabled
color: numberColor for the item
icon: stringMaterial icon keyword