JavaScript Dropdown

Dropdown Overview

The Jsuites.dropdown is a lightweight responsive JavaScript dropdown 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 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`
`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 dropdown's 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>

Dropdown Item Groups

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>

More Dropdown Examples

Edit this page on GitHub