JavaScript dropdown
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 |