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

JavaScript Dropdown

JavaScript dropdown

Adding new options to the dropdown

The jSuites.dropdown and autocomplete plugin allows the user to add new options to the dropdown. This feature is disabled by default. The initialization flag newOptions: true will enabled the feature. There is an extra option to handle ids generate in a remote server, as follow:

Done

Tomatoes

Carrots

Onions

Garlic

<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>
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: '/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>

Edit this page on GitHub