Vue 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.



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

Looks good!
Input value is required

Vue Autocomplete - API


Import


        import { MDBAutocomplete } from "mdb-vue-ui-kit";
      

Properties

Property Type Default Description
filter Function - Function that returns filtered data to the component
displayValue Function (value) => value Function executed for complex search results, to get value to display in the results list
filter Function - Function that returns filtered data to the component
itemContent Function - Function that returns custom template for result item
listHeight Number 190 Height of the result list
noResultsText String 'No results found' Message that will be displayed in the component dropdown if no result is found
threshold Number 300 Minimum input length to start search query
optionHeight Number 38 Set height for single item
visibleOptions Number 5 Set count of options visible without scroll

Methods

Name Description Example
open Manually opens a component dropdown $refs.autocompleteRef.open()
close Manually closes a component dropdown $refs.autocompleteRef.close()
toggle Manually toggles a component dropdown $refs.autocompleteRef.toggle()

Slots

Name Description
default Slot for custom list content

Events

Name Description
open.mdb.autocomplete This event fires immediately when the autocomplete dropdown is opened.
close.mdb.autocomplete This event fires immediately when the autocomplete dropdown is closed.
itemSelect.mdb.autocomplete This event fires immediately when the autocomplete item is selected.
update.mdb.autocomplete This event fires immediately when the autocomplete results list is updated.

        <MDBSelect v-model:options="options1" @clear="handleClear" />