Work with ComboBox

Setting/getting value(s)

Use the setValue() method to select options in Combobox. The method takes one parameter:

• value — (string|number|array) the ids of the Combobox options in the data collection to select

// select one option
combo.setValue(combo.data.getId(1));
 
// selects several options at once
combo.setValue([combo.data.getId(1), combo.data.getId(3)]);

Related sample: Combobox. Set value

Apply the getValue() method to get the list of selected options. The method returns ids of selected options, and the default return type is a string. To get an array of strings, pass the following parameter:

• asArray — (boolean) true, to return ids as an array of strings

const id = combo.getValue();
// -> "u1556098582074"
 
// returns ids of selected options as strings
const ids = combo.getValue();
// -> "u1556097609214,u1556097609228,u1556097609244"
 
// returns ids of selected options as an array of strings
const array_ids = combo.getValue(true);
// -> ["u1556097609214", "u1556097609228", "u1556097609244"]

Related sample: Combobox. Get value

Disabling/enabling ComboBox

Use disable() and enable() methods to disable and enable Combobox:

// disabling a combo box
combo.disable();
// enabling a combo box
combo.enable();

Related sample: Combobox. Enable, disable, is disabled

Checking if a combobox is disabled

Call the isDisabled() method to check whether Combobox is disabled:

combo.isDisabled(); // -> true/false

Related sample: Combobox. Enable, disable, is disabled

Repainting ComboBox

You can repaint Combobox on a page with the paint() method, for example after you change its configuration:

// disabling ComboBox via the configuration object
combo.config.disabled = true;
// repaints ComboBox with a new config
combo.paint();

Clearing input

The clear() method clears the selected values from the Combobox input:

combo.clear();

Related sample: Combobox. Clear

Setting/removing focus

You can set focus in the Combobox input without opening the list of options. Use the focus() method:

combo.focus();

Apply the blur() method to remove focus from Combobox:

combo.blur();

Related sample: Combobox. Focus

Hiding/showing the popup

You can show and hide the Combobox popup with the Popup API.

Use the following methods to hide and show the popup:

show()	shows a popup in Combobox. Takes two parameters: container - (HTMLElement) mandatory, the container to place a popup in config - (object) optional, the configuration object of a popup
hide()	hides a popup

// showing a popup
combo.popup.show(container);

// hiding a popup
combo.popup.hide();

Related sample: Combobox. Show / hide options list

Handle the following events to control when the popup opens and closes:

beforeShow	fires before a popup is shown. The handler function takes one parameter: container - (HTMLElement) the container the popup is placed in Return false to prevent the popup from opening
afterShow	fires after a popup is shown. The handler function takes one parameter: container - (HTMLElement) the container the popup is placed in
beforeHide	fires before a popup is hidden. The handler function takes two parameters: fromOuterClick - (boolean) true, for a click outside a popup, otherwise - false e - (Event) the native mouse event Return false to prevent the popup from closing
afterHide	fires after a popup is hidden. The handler function takes one parameter: e - (Event) the native mouse event

combo.popup.events.on("BeforeShow", function(HTMLElement){
    console.log("A popup will be shown");
    return true;                
});

combo.popup.events.on("AfterShow", function(HTMLElement){
    console.log("A popup is shown");                
});

combo.popup.events.on("BeforeHide", function(fromOuterClick,e){
    console.log("A popup will be hidden");
    return true;                
});

combo.popup.events.on("AfterHide", function(e){
    console.log("A popup is hidden");            
});

Related sample: Combobox. Popup Events

Using Data Collection API

You can manage Combobox options with the Data Collection API.

Adding options into ComboBox

You can add more options to an initialized Combobox on the fly. Use the add() method of Data Collection. The method takes two parameters:

config	(object) the configuration object of the added option
index	(number) optional, the position to add an option at

For example:

combobox.data.add({value:"Russia"},1);

Related sample: Combobox. Add data and remove item

info

From v7.3, Combobox includes the addOption() method that you can also use to add new options to the data collection.

Updating ComboBox options

You can change option settings with the update() method of Data Collection. The method takes two parameters:

id	the id of the option
config	an object with the new option configuration

For example, you can change the image of an option:

combo.data.update("option_id",{
    value:"Russia", src: "../common/flags/ru.png"
});

Related sample: Combobox. Update

Removing options from ComboBox

Use the remove() method of Data Collection to remove an option. Pass the option id to the method:

combo.data.remove("option_id");

note

Check the full Data Collection API reference.