JavaScript Dropdown

Quick reference

Considering the example below:

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

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

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


Methods

Method Description
myDropdown.open();Open the dropdown
myDropdown.close(boolean);Close the dropdown
@param int ignoreEvents - Do no execute onclose event
myDropdown.getText();Get the current label(s) from the selected option(s) in the dropdown
myDropdown.getValue();Get the current value(s) from the selected option(s) in the dropdown
myDropdown.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.
myDropdown.reset();Clear all selected options from the dropdown
myDropdown.add();Add a new element to the dropdown


Events

Method Description
onopenTrigger a method when the dropdown is opened.
(element: DOMElement) => void
oncloseTrigger a method when the dropdown is closed.
(element: DOMElement) => void
onchangeTrigger a method when value is changed.
(element: DOMElement, index: number, oldValue: string, newValue: string, oldLabel: string, newLabel: string) => void
onfocusTrigger a method when the dropdown lost focus.
(element: DOMElement, value: number) => void
onblurTrigger a method when the dropdown lost focus.
(element: DOMElement, value: number) => void
oninsertTrigger a method when a new option is added to the dropdown.
(element: DOMElement, item: Object, dataItem: Object) => void


Initialization options

Method Description
data: mixedData to load into the dropdown
src: stringCan be loaded from a external file
multiple: booleanMultiple options
autocomplete: booleanAllow autocomplete
type: stringRender type: default | picker | searchbar
width: numberDefault width
maxWidth: numberMax width for the dropdown
value: stringSelected value
placeholder: stringPlaceholder instructions
newOptions: booleanEnable the add new option controls