Class: ComboBox

componyx .UI.ComboBox(id, properties) → {Object}

new ComboBox(id, properties) → {Object}

ComboBox class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.load`	componyx.UI.base.AjaxMethod	AJAX method used to load items on demand.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

ComboBoxEvents
Item

Members

allowCustomValue :Boolean

Gets or sets a value indicating whether users can enter values not in the option list.

Type:

Boolean

allowInput :Boolean

Gets or sets a value indicating whether textual input is allowed.

Type:

Boolean

autoGrow :Boolean

Gets or sets a value indicating if the input box will increase width automatically based on the size of the text.

Type:

Boolean

clearButtonId :String|null

Gets or sets the id of the clear button from which the settings are cloned.

Type:

String | null

collapseOnItemSelect :Boolean

Gets or sets a value indicating whether the list box is collapsed on an item select.

Type:

Boolean

columnIdentifyingCssClass :String

Gets or sets the identifying css class of a column.

Type:

String

cssClassClearButton :String

Gets or sets the css class of the clear button component.

Type:

String

cssClassDataPager :String

Gets or sets the css class of the datapager component.

Type:

String

cssClassExpandButton :String

Gets or sets the css class of the expand button component.

Type:

String

cssClassExpandIcon :String

Gets or sets the css class of the expand icon.

Type:

String

cssClassItem :String

Gets or sets the default css class of an item.

Type:

String

cssClassItemCheckBox :String

Gets or sets the css class of an item checkbox.

Type:

String

cssClassItemIcon :String

Gets or sets the css class of an item icon.

Type:

String

cssClassItemSelectAll :String

Gets or sets the css class of the 'select all' checkbox item.

Type:

String

cssClassList :String

Gets or sets the css class of the unordered list.

Type:

String

cssClassListBox :String

Gets or sets the css class of the list box component.

Type:

String

cssClassNoResult :String

Gets or sets the css class of the noresult container.

Type:

String

cssClassPreloader :String

Gets or sets the css class of the preloader container.

Type:

String

dataPagerId :String|null

Gets or sets the id of the list datapager from which the settings are cloned.

Type:

String | null

disableClearButton :Boolean

Gets or sets a value indicating whether the clear button is disabled.

Type:

Boolean

disableExpandOnClick :Boolean

Gets or sets a value indicating whether the list box can only be expanded by typing, not by clicking the expand button.

Type:

Boolean

disabled :Boolean

Gets or sets a value indicating whether the combobox is disabled.

Type:

Boolean

enableDataPager :Boolean

Gets or sets a value indicating whether the datapager is enabled.

Type:

Boolean

events :componyx.UI.ComboBox.ComboBoxEvents

ComboBox events

Type:

componyx.UI.ComboBox.ComboBoxEvents

expandButtonId :String|null

Gets or sets the id of the expand button from which the settings are cloned.

Type:

String | null

hiddenInputId :String|null

Gets or sets or sets the id of the HTML hidden input.

Type:

String | null

itemList :Array.<componyx.UI.ComboBox.Item>|null

Gets or sets the list of items.

Type:

Array.<componyx.UI.ComboBox.Item> | null

itemTemplateId :String|null

Gets or sets the default template id of an item.

Type:

String | null

keepSelectionOnReload :Boolean

Gets or sets a value indicating whether the current selection must be kept when reloading data.

Type:

Boolean

keyboardNavigation :Boolean

Gets or sets a value indicating whether keyboard navigation is allowed.

Type:

Boolean

listBoxId :String|null

Gets or sets the id of the list box from which the settings are cloned.

Type:

String | null

loadOnDemand :Boolean

Gets or sets a value indicating whether the data is loaded when the text input is changed or the list box is expanded.

Type:

Boolean

loadOnDemandCharStart :Number

Gets or sets the amount of characters required before a load on demand is performed.

Type:

Number

loadOnDemandDelay :Number

Gets or sets the delay in milliseconds on a keydown event before a load on demand is performed.

Type:

Number

loadOnRender :Boolean

Gets or sets a value indicating whether the data is loaded when the component is rendering.

Type:

Boolean

multiSelect :Boolean

Gets or sets a value indicating whether multiple items can be selected through checkboxes.

Type:

Boolean

multiSelectTagging :Boolean

Gets or sets a value indicating whether selected items are displayed as tags.

Type:

Boolean

name :String

Gets or sets the name of the hidden input field which contains the selected value(s).

Type:

String

placeholder :String

Gets or sets the placeholder which is visible when the input box has no value.

Type:

String

reloadOnExpand :Boolean

Gets or sets a value indicating whether the data is reloaded when the list box is expanded.

Type:

Boolean

splitButton :Boolean

Gets or sets a value indicating whether the combo box uses a split button.

Type:

Boolean

tagButtonId :String|null

Gets or sets the id of the tag button from which the settings are cloned.

Type:

String | null

tooltipId :String|null

Gets or sets the id of the tooltip to show.

Type:

String | null

tooltipManagerId :String|null

Gets or sets the tooltip manager used to display tooltips.

Type:

String | null

value :String

Gets or sets the initial selected value.

Type:

String

width :String

Gets or sets the input width in the specified unit.

Type:

String

FilterOption

Type:

number

Properties:

Name	Type	Description
`STARTSWITH`	number
`CONTAINS`	number
`EQUALS`	number
`ENDSWITH`	number

Methods

clear()

Clears the input value and the selected item(s).

clearInput()

Clears the input.

clearList()

Clears the item list.

clearSelection()

Clears the selected item(s).

deselectItem(id)

Deselects the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

deselectItems(ids)

Deselects the items with the specified id.

Parameters:

Name	Type	Description
`ids`	Array	The list of item ids.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

disable()

Disables the combo-box

disableItem(id)

Disables the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

enable()

Enables the combo-box

enableItem(id)

Enables the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

focus()

Sets the focus on the input element.

getInput() → {HTMLElement}

Gets the input element.

Returns:

The input element.

Type: HTMLElement

getItemElement(id) → {HTMLElement}

Gets the list-item element for the specified item id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

Returns:

The list item element.

Type: HTMLElement

getListBox() → {Box}

Gets the box component which serves as item list container.

Returns:

The Box component.

Type: Box

getSelectedItem() → {Item}

Gets the selected item.

Returns:

The selected item.

Type: Item

getSelectedItems() → {Array.<Item>}

Gets the selected items in a multiselect combobox.

Returns:

The selected items.

Type: Array.<Item>

getValue() → {String}

Gets the selected value.

Returns:

The selected value;

Type: String

hideListBox()

Hides the listbox.

load(clearopt, pageIndexopt, showListBoxopt)

Triggers a data load.

Parameters:

Name	Type	Attributes	Default	Description
`clear`	Boolean	<optional>		Defines if the current selection and input value should be cleared.
`pageIndex`	Number	<optional>		Defines which page index to load.
`showListBox`	Boolean	<optional>	true	Defines if the list box is shown.

postRender()

Executes the post render procedure.

render()

Renders the component.

selectItem(id)

Selects the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

selectItems(ids)

Selects the items with the specified id.

Parameters:

Name	Type	Description
`ids`	Array	The list of item ids.

setFooterTemplate(content)

Sets the footer template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setHeaderTemplate(content)

Sets the header template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setItemTagTemplate(content)

Sets the multi-select item tag template. The template supports all data-item interpolations (view Base method comment). Default value: {text}.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setMultiSelectInputTemplate(content)

Sets the multiselect input template. The template supports the below listed interpolations. Default value: {count} items selected

{count} This value will be replaced with the selected item count.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setNoResultTemplate(content)

Sets the no result template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	Text string. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setPlaceholder(text)

Sets the placeholder text.

Parameters:

Name	Type	Description
`text`	String	The placeholder text.

setPreloaderTemplate(content)

Sets the preloader template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setSelectAllTemplate(content)

Sets the select all checkbox template. The template supports the below listed interpolations.

{checkBox} This value will be replaced with the checkbox element to select all items.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	HTML string or element node as content. Pass null or empty string to remove the existing template.

See:

componyx.UI.base.addTemplate

setValue(value, focusopt)

Sets the input to the specified value. With multi-select enabled, a comma separated list of item values can be specified.

Parameters:

Name	Type	Attributes	Description
`value`	String \| Array.<String>		The value(s) to set.
`focus`	Boolean	<optional>	A value indicating if the input should get focus.

showListBox()

Shows the listbox.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.