A new version of the jSuites JavaScript Dropdown plugin is available here.

JavaScript Dropdown

JavaScript Dropdown And Autocomplete

The jSuites.dropdown is a lightweight multipurpose responsive JavaScript dropdown and general option picker plugin. It works great in small screens and has different render methods and several initialization features to give developers a flexible JavaScript dropdown and promote a better user experience in web-based applications.

The new JavaScript dropdown plugin brings a native autocomplete, multiple option selection, responsive render types and much more features, such as:

Dropdown from a JavaScript Array
Dropdown from an external JSON request
Autocomplete search
Dropdown with Lazy loading
Multiple dropdown selection
Responsive dropdown with multiple options and responsive render types
Dropdown with image and icons
Dropdown with group of items and categories

Example

JavaScript autocomplete

Create a dropdown autocomplete with a large data source (20K options)

<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-large"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown-large'), {
    url: '/docs/large',
    autocomplete: true,
    lazyLoading: true,
    multiple: true,
    width: '280px',
});
</script>
</html>

Dropdown item groups

Create group of items on your dropdown.

<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-groups"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown-groups'), {
    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>

Dropdown new option

Enable a new option button to your dropdown.

<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-add"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown-add'), {
    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: '/docs/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>

More dropdown examples

Edit this page on GitHub