Suggestions
The ComboBox provides suggestions which appear while the user types in the input field and a number of settings for controlling the behavior of its suggestions list.
Enabling Suggestions
To enable the list with suggestions, set the suggest
property of the ComboBox to true
. Whenever the user modifies the input value, the ComboBox automatically completes the user input with the first text match. If the first text match does not begin with the current user input, the ComboBox displays no suggestions.
Controlling the List with Suggestions
To set the state of the list:
You can also retrieve the current open state of the suggestion list by using the isOpen
getter.
Setting the Initially Opened Component
You can enable the user to manually toggle between the open and close state of the suggestion list by setting the toggle
method. If set to true
, the method defines that the suggestion list is open. If set to false
, the method defines that the suggestion list is closed.
The following example demonstrates how to configure an initially opened ComboBox.
Preventing Opening and Closing
The open
and close
events are emitted right before the suggestion list is about to open or close. To prevent the corresponding action, call the preventDefault
method of the event argument.
In the following example, the ComboBox does not close its popup when we select a value using ENTER or a mouse click. It only closes the popup when the component loses focus.