Combobox

Properties

Property	Type	Default	Description
label	string	''	Label text for the input field.
placeholder	string	''	Text displayed when no value is entered in the input field.
items	Array<object>		Array of items to be displayed. The display text is determined using the labelField property.
suggestCount	number	6	Number of items to be displayed in the suggestion list.
labelField	string|Function	null	Defines the field that determines the value of items to be displayed.
closeOnSelect	boolean	true	Defines whether to automatically close the suggestion list upon item selection.
closeOnFocusOut	boolean	true	Defines whether to automatically close the suggestion list on focus out.
closeOnOutsideDown	boolean	true	Defines whether to automatically close the suggestion list on outside click.
inputValue	string	''	Current value entered in the input field.
minChar	number	0	Minimum number of characters required to activate the suggestion list.
clearable	boolean	false	Whether to enable the reset button when the input field has a value.
delimiterOnKeys	Array<number>	[9, 13]	Array of key codes that trigger value input when pressed by the user.
coordinateMode	'global'|'relative'|'none'	relative	Sets the coordinate system for the popup.
filterable	boolean	false	Whether items in the combobox can be filtered based on the user's input string.
chipRemovable	boolean	false	Whether to enable the delete button for displayed items.
filter	(item: any, keyword: string) => boolean		Defines a comparison function for filtering items. When the filtering property is true, only filtered items are displayed in the list based on this function's return value.
allowMultiple	boolean	false	Whether users can select multiple items.
requireSelection	boolean	false	Whether at least one item must always be selected.
valueField	string		Name of the field that determines the value of the selected item.
selectedItem	object		Defines the selected item.
selectedItems	Array<object>		Defines multiple selected items.
selectedValue	Array<string>		Defines the valueField property values of the selected items.

Methods

Method	Parameters	Return Value	Description
focus		void	Sets focus to the input field.
blur		void	Removes focus from the input field.
openSuggest	value?: string	boolean	Opens the suggestion list. Retrieves and displays the suggestion list using the value parameter and suggestSource property.
closeSuggest		void	Closes the suggestion list.
clear		void	Resets the entered value, displayed suggestion list, and selected item.

Events

Event	Type	Description
suggest-caret-change	(event: CustomEvent<{value: number; oldValue: number}>) => void	Occurs when the cursor index changes in the suggestion list.
suggest-opening	(event: SuggestEvent<T>) => void	Occurs before the suggestion list opens.
suggest-open	(event: SuggestEvent<T>) => void	Occurs when the suggestion list opens.
suggest-closing	(event: SuggestEvent<T>) => void	Occurs before the suggestion list closes.
suggest-close	(event: SuggestEvent<T>) => void	Occurs when the suggestion list closes.
suggest-item-down	(event: SuggestEvent<T>) => void	Occurs when mouse down on a suggestion list item. Occurs when selectOnClick is false.
suggest-item-click	(event: SuggestEvent<T>) => void	Occurs when mouse click on a suggestion list item. Occurs when selectOnClick is true.
suggest-select	(event: SuggestEvent<T>) => void	Occurs when a specific item is selected from the suggestion list.
value-change	(event: CustomEvent<{value: string; oldValue: string}>) => void	Occurs when the value property changes.
input	(event: CustomEvent<{value: string; trigger: InputEvent}>) => void	Occurs when the input element's value changes.
keydown	(event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void	Occurs when a key is pressed on the input element.
keyup	(event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void	Occurs when a key is released on the input element.
focusin	(event: CustomEvent<{trigger: Event}>) => void	Occurs when focus is received.
focusout	(event: CustomEvent<{trigger: Event}>) => void	Occurs when focus is lost.
suggest-add	(event: SuggestEvent<T>) => void	Occurs when a token item is added.
suggest-remove	(event: SuggestEvent<T>) => void	Occurs when a token item is removed.
suggest-duplicate	(event: SuggestEvent<T>) => void	Occurs when there is a duplicate item when adding a token item.