Vue3 AutoComplete

Vue AutoComplete is an input component that provides real-time suggestions when being typed. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import AutoComplete from'primevue/autocomplete';

Getting Started

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. Example below connects to a remote datasource to fetch the results;

<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />

export default {
    data() {
        return {
            selectedCountry: null,
            filteredCountries: null
        }
    },
    countryService: null,
    created() {
        this.countryService = new CountryService();
    },
    methods: {
        searchCountry(event) {
            this.filteredCountriesBasic = this.countryService.search(event.query);
        }
    }
}

Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes “blank” or “current” as possible values. “blank” is the default mode to send a query with an empty string whereas “current” setting sends a query with the current value of the input.

<AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" />

Multiple Mode

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.

<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />

Objects

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name:”United States”,code:”USA”}.

<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />

Templating

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.

<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
    <template #item="slotProps">
        <img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
        <div>{{slotProps.item}}</div>
    </template>
</AutoComplete>

Resources

Visit the PrimeVue AutoComplete showcase for demos and documentation.