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 |