Combobox

Creates an input field where you can enter your own value or select a value from the list.

Usage #

<select data-kube="combobox">
    <option value="">...</option>
</select>

Settings #

placeholder

Type: String

Default: ''

This option allows to set a placeholder to the combobox input.

<select data-kube="combobox" data-placeholder="Enter name or select...">
    <option value="">...</option>
</select>

Events #

Event Description
set This event fires when the combobox gets the typed or selected value from the list.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            combobox: {
                set: function(sender, value)
                {
                    console.log('Got it!');
                }
            }
        }
    });
})(Kube);

Catch events from a specific combobox module

Set an ID for the combobox:

<select id="mycombo" data-kube="combobox">
    <option value="">...</option>
</select>

Or set data-name attribute:

<select data-name="mycombo" data-kube="combobox">
    <option value="">...</option>
</select>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            combobox: {
                set: function(sender, value)
                {
                    if (sender._id === 'mycombo')
                    {
                        console.log('Got it!');
                    }
                }
            }
        }
    });
})(Kube);