JavaScript Dropdown
The jSuites Dropdown is a JavaScript plugin that offers a suite of customizable options that suites multiple application needs.
The new versions enhances functionality with native autocomplete, multi-select capabilities, and adaptive rendering and other features such as:
- Great performance;
- Create dropdowns from a local array of data;
- Load data from a remote data source;
- Autocomplete with local or remote search;
- Lazy loading support;
- Multi-select dropdown options;
- Responsive design;
- Visual enhancements with images and icons;
- Organized dropdowns with item grouping;
Documentation
Methods
The JavaScript dropdown instance provides the following methods for programmatic interaction:
Method | Description |
---|---|
open(); |
Opens the dropdown. |
close(boolean); |
Closes the dropdown.@param boolean ignoreEvents - If true, does not trigger the onClose event. |
getText(); |
Retrieves the label(s) from the selected option(s) in the dropdown. |
getValue(); |
Retrieves the value(s) from the selected option(s) in the dropdown. |
setValue(string|array); |
Sets new value(s).@param mixed newValue - A single value as a string or multiple values as an array for multi-select dropdowns. |
reset(); |
Clears all selected options in the dropdown. |
add(); |
Adds a new option to the dropdown. |
setData(mixed); |
Loads new data into the dropdown.@param mixed data - The data to load. |
getData(); |
Retrieves the data currently loaded in the dropdown. |
setUrl(string, function); |
Updates the URL from which the dropdown fetches data.@param string url @param function callback - The callback function to execute after setting the URL. |
getPosition(string); |
Retrieves the position of the option associated with the given value.@param string value - The value of the option. |
selectIndex(int); |
Selects an option based on its index.@param int index - The index of the option to select. |
Events
The following events can be use to integrate the dropdown with your application for enhanced interactivity:
Event | Description |
---|---|
onopen |
Triggered when the dropdown opens.(DOMElement element) => void |
onclose |
Triggered when the dropdown closes.(DOMElement element) => void |
onchange |
Triggered when the selected value changes.(DOMElement element, Number index, String oldValue, String newValue, String oldLabel, String newLabel) => void |
onfocus |
Triggered when the dropdown receives focus.(DOMElement element) => void |
onblur |
Triggered when the dropdown loses focus.(DOMElement element) => void |
onbeforeinput |
Triggered before the item addition prompt is opened, allowing a customized input to be used. The return of this function is the title of the new item.(Object instance) => void |
onbeforeinsert |
Triggered before a new item is added to the dropdown.(Object instance, Object item) => void |
oninsert |
Triggered when a new option is added to the dropdown.(Object instance, Object item, Object dataItem) => void |
onload |
Triggered when the dropdown is fully loaded with data.(DOMElement element, Object instance, Array data, String currentValue) => void |
Initialization Options
Customize your dropdowns behavior with the following initial settings:
Property | Description |
---|---|
data: Array |
An array of items to load into the dropdown. |
url: string |
The URL of an external file to load dropdown data from. |
multiple: boolean |
Set to true to allow multiple selections. |
autocomplete: boolean |
Enables the autocomplete feature. |
type: string |
Sets the render type. Options: default , picker , or searchbar . |
width: string |
Specifies the dropdown's default width. |
value: string |
Sets the initially selected value. |
placeholder: string |
Displays placeholder text when no selection is made. |
newOptions: boolean |
Enables controls for adding new options. |
lazyLoading: boolean |
Enables lazy loading for improved performance with large datasets. |
format: 0|1 |
Determines the data format. 0 for { text, value } , 1 for { id, name } . Default is 0 . |
Dropdown Items
Each option in the dropdown is define by one object and the possible attributes are the following:
Property | Description |
---|---|
value: mixed |
The item's value. Default format. |
text: string |
The item's display label. Default format. |
id: mixed |
The item's identifier, used when format property is set to 1 . |
name: string |
The item's name, used as a label when format property is set to 1 . |
title: string |
A brief description of the item. |
tooltip: string |
Text displayed on mouseover. |
image: string |
URL or path to the item's icon image. |
group: string |
The name of the group this item belongs to. |
synonym: array |
Keywords associated with the item to aid in search. |
disabled: boolean |
If true , the item is not selectable. |
color: number |
A numerical value representing the item's color. |
icon: string |
A keyword for a Material Design icon associated with the item. |
Examples
JavaScript Autocomplete Dropdown
Create an autocomplete dropdown capable of handling a vast dataset using this example:
<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="dropdown"></div>
<script>
jSuites.dropdown(document.getElementById('dropdown'), {
url: '/docs/large',
autocomplete: true,
lazyLoading: true,
multiple: true,
width: '280px',
});
</script>
</html>
import { Dropdown } from 'jsuites/react'
import { useRef, useEffect } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const dropdown = useRef(null);
return (
<div className="App">
<Dropdown
ref={dropdown}
url={'/docs/large'}
multiple={true}
lazyLoading={true}
width={'280px'}
autocomplete={true}
/>
</div>
);
}
export default App;
<template>
<Dropdown ref="dropdown" url="https://jsuites.net/docs/large" width="280px"
:multiple="true" :lazyLoading="true" :autocomplete="true" />
</template>
<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'
export default {
name: 'App',
components: {
Dropdown
},
};
</script>
Grouping Items
Organize your dropdown menu with categorized item groups using this example:
<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="dropdown"></div>
<script>
jSuites.dropdown(document.getElementById('dropdown'), {
data:[
{ group:'Breads', value:'1', text:'Wholemeal' },
{ group:'Breads', value:'2', text:'Wholegrain' },
{ group:'Breakfast Cereals', value:'4', text:'High fibre (wholegrain) oats' },
{ group:'Breakfast Cereals', value:'5', text:'Porridge' },
{ group:'Grains', value:'7', text:'Rice' },
{ group:'Grains', value:'8', text:'Barley' },
{ group:'Other products', value:'10', text:'Pasta' },
{ group:'Other products', value:'11', text:'Noodles' }
],
width:'280px',
autocomplete: true,
});
</script>
</html>
import { Dropdown } from 'jsuites/react'
import { useRef, useEffect } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const dropdown = useRef(null);
return (
<div className="App">
<Dropdown ref={dropdown} data={[
{ group: 'Breads', value: '1', text: 'Wholemeal' },
{ group: 'Breads', value: '2', text: 'Wholegrain' },
{ group: 'Breakfast Cereals', value: '4', text: 'High fibre (wholegrain) oats' },
{ group: 'Breakfast Cereals', value: '5', text: 'Porridge' },
{ group: 'Grains', value: '7', text: 'Rice' },
{ group: 'Grains', value: '8', text: 'Barley' },
{ group: 'Other products', value: '10', text: 'Pasta' },
{ group: 'Other products', value: '11', text: 'Noodles' }
]} width={'280px'} autocomplete={true} />
</div>
);
}
export default App;
<template>
<Dropdown ref="dropdown" :data="data" width="280px" :autocomplete="true" />
</template>
<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'
export default {
name: 'App',
components: {
Dropdown
},
data() {
return {
data: [
{ group: 'Breads', value: '1', text: 'Wholemeal' },
{ group: 'Breads', value: '2', text: 'Wholegrain' },
{ group: 'Breakfast Cereals', value: '4', text: 'High fibre (wholegrain) oats' },
{ group: 'Breakfast Cereals', value: '5', text: 'Porridge' },
{ group: 'Grains', value: '7', text: 'Rice' },
{ group: 'Grains', value: '8', text: 'Barley' },
{ group: 'Other products', value: '10', text: 'Pasta' },
{ group: 'Other products', value: '11', text: 'Noodles' }
]
}
}
};
</script>
Dropdown New Option
Incorporate an option to add new items into your dropdown menu, enhancing its flexibility and user interaction:
<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="dropdown"></div>
<script>
jSuites.dropdown(document.getElementById('dropdown'), {
data:[
{ value:'1', text: 'Tomatoes' },
{ value:'2', text: 'Carrots' },
{ value:'3', text: 'Onions' },
{ value:'4', text: 'Garlic' },
],
newOptions: true,
oninsert: function(instance, item) {
jSuites.ajax({
url: '/v5/getId',
type: 'POST',
dataType: 'json',
data: { data: item },
success: function(idFromTheServer) {
// Set the item id from the number sent by the remote server
instance.setId(item, idFromTheServer);
}
});
},
width:'280px',
});
</script>
</html>
import { Dropdown } from 'jsuites/react'
import jSuites from 'jsuites'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'
function App() {
const dropdown = useRef(null);
const onInsert = function (instance, item) {
jSuites.ajax({
url: '/v5/getId',
type: 'POST',
dataType: 'json',
data: { data: item },
success: function (idFromTheServer) {
// Set the item id from the number sent by the remote server
instance.setId(item, idFromTheServer);
}
});
};
return (
<div className="App">
<Dropdown
ref={dropdown}
data={[
{ value: '1', text: 'Tomatoes' },
{ value: '2', text: 'Carrots' },
{ value: '3', text: 'Onions' },
{ value: '4', text: 'Garlic' },
]}
width={'280px'}
newOptions={true}
oninsert={onInsert}
/>
</div>
);
}
export default App;
<template>
<Dropdown ref="dropdown" :data="data" :oninsert="onInsert" width="280px" :newOptions="true" />
</template>
<script>
import { Dropdown } from "jsuites/vue";
import jSuites from 'jsuites';
import 'jsuites/dist/jsuites.css'
export default {
name: 'App',
components: {
Dropdown
},
data() {
return {
data: [
{ value: '1', text: 'Tomatoes' },
{ value: '2', text: 'Carrots' },
{ value: '3', text: 'Onions' },
{ value: '4', text: 'Garlic' },
]
}
},
methods: {
onInsert: function (instance, item) {
jSuites.ajax({
url: '/v5/getId',
type: 'POST',
dataType: 'json',
data: { data: item },
success: function (idFromTheServer) {
// Set the item id from the number sent by the remote server
instance.setId(item, idFromTheServer);
}
});
}
}
};
</script>