Autocomplete
Vue Bootstrap 5 Autocomplete component
Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows
Note: Read the API tab to find all available options and advanced customization
Basic example
The filter property is required in order for component to work properly. The property accepts a function that is expected to return an array of results or a Promise that resolves to an array of results.
Display value
The displayValue property allow to separate original result value from the value that will be displayed in the result list or input (after selection). Its useful when the data returned by the filter function is an array of objects. You can specify which parameter of the object should be displayed.
Asynchronous search
The function passed to the filter option can return a Promise that resolves to an array of results. By default the component expects to receive data as an array of strings. If you want to return an array of objects instead, you can use displayValue option to specify which parameter should be used as a display value of the specific result.
Threshold
Use threshold property to specify a minimum number of the characters in the input field needed to perform a search operation.
Custom item template
The itemContent property allow to display custom HTML in the result list. You can use the optionHeight and visibleOptions properties to modify the result list height when you want to display more content in the component dropdown.
Custom content
Pass any content to a default slot to display a custom content container with a class .autocomplete-custom-content at the end of the items list. You can use it to display a number of search results.
Validation
You can create custom rules and show the validation results via isValidated and isValid properties.
Auto select
Set autoSelect option to true to enable selecting on Tab press.