AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method - gets the query text as event.query property and should update the suggestions with the search results.
+ gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.
+Multiple mode is enabled using multiple property to select more than one value from the autocomplete. In this case, value reference should be an array.
Item template allows displaying custom content inside the suggestions panel. The local template variable passed to the template is an object in the suggestions array.
+Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.
Any valid attribute such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| Name | +Type | +Default | +Description | +
| value | -any | -null | -Value of the component. | -
| suggestions | -array | -null | -An array of suggestions to display. | -
| field | -any | -null | -Field of a suggested object to resolve and display. | -
| scrollHeight | -string | -200px | -Maximum height of the suggestions panel. | -
| dropdown | -boolean | -false | -Displays a button next to the input field when enabled. | -
| dropdownMode | -string | -blank | -Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value. | -
| multiple | -boolean | -false | -Specifies if multiple values can be selected. | -
| minLength | -number | -1 | -Minimum number of characters to initiate a search. | -
| delay | -number | -300 | -Delay between keystrokes to wait before sending a query. | -
| disabled | -boolean | -false | -When present, it specifies that the component should be disabled. | -
| value | +any | +null | +Value of the component. | +
| suggestions | +array | +null | +An array of suggestions to display. | +
| field | +any | +null | +Field of a suggested object to resolve and display. | +
| scrollHeight | +string | +200px | +Maximum height of the suggestions panel. | +
| dropdown | +boolean | +false | +Displays a button next to the input field when enabled. | +
| dropdownMode | +string | +blank | +Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value. | +
| multiple | +boolean | +false | +Specifies if multiple values can be selected. | +
| minLength | +number | +1 | +Minimum number of characters to initiate a search. | +
| delay | +number | +300 | +Delay between keystrokes to wait before sending a query. | +
Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.
| Name | -Parameters | -Description | -
|---|---|---|
| Name | +Parameters | +Description | +
| complete | -
- event.originalEvent: browser event - event.query: Value to search with - |
- Callback to invoke to search for suggestions. | -
| input | -value: Value of the component | -Callback to invoke on input event of input field. | -
| focus | -event: Browser event | -Callback to invoke when autocomplete gets focus. | -
| blur | -event: Browser event | -Callback to invoke when autocomplete loses focus. | -
| select | -event.originalEvent: Browser event - event.value: Value of the component |
- Callback to invoke when a suggestion is selected. | -
| unselect | -event.originalEvent: Browser event - event.value: Value of the component |
- Callback to invoke when a selected value is removed. | -
| click-dropdown | -
- event.originalEvent: browser event - event.query: Current value of the input field - |
- Callback to invoke to when dropdown button is clicked. | -
| clear | -event: Browser event | -Callback to invoke when input is cleared by the user. | -
| complete | +
+ event.originalEvent: browser event + event.query: Value to search with + |
+ Callback to invoke to search for suggestions. | +
| input | +value: Value of the component | +Callback to invoke on input event of input field. | +
| focus | +event: Browser event | +Callback to invoke when autocomplete gets focus. | +
| blur | +event: Browser event | +Callback to invoke when autocomplete loses focus. | +
| select | +event.originalEvent: Browser event + event.value: Value of the component |
+ Callback to invoke when a suggestion is selected. | +
| unselect | +event.originalEvent: Browser event + event.value: Value of the component |
+ Callback to invoke when a selected value is removed. | +
| click-dropdown | +
+ event.originalEvent: browser event + event.query: Current value of the input field + |
+ Callback to invoke to when dropdown button is clicked. | +
| clear | +event: Browser event | +Callback to invoke when input is cleared by the user. | +
Calendar passes any valid attribute such as name and placeholder to the underlying input text element. Following are the additional properties to configure the calendar.
+Any valid attribute such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.