Autocomplete

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.
suggestSource	string|Function|Promise<any>		Defines the data source that generates matching data based on key input.
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.
selectedItem	object		The item that was selected from the suggestion list.

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.