import AutoComplete from 'primevue/autocomplete';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"></script>
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)" optionLabel="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 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)" optionLabel="name" />
AutoComplete can also work with objects using the optionLabel 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 optionLabel="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
Options groups are specified with the optionGroupLabel and optionGroupChildren properties.
export default {
data() {
return {
selectedGroupedCity: null,
groupedCities: [{
label: 'Germany', code: 'DE',
items: [
{label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'},
{label: 'Hamburg', value: 'Hamburg'},
{label: 'Munich', value: 'Munich'}
]
},
{
label: 'USA', code: 'US',
items: [
{label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'},
{label: 'New York', value: 'New York'},
{label: 'San Francisco', value: 'San Francisco'}
]
},
{
label: 'Japan', code: 'JP',
items: [
{label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}
}
}
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"></AutoComplete>
ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable forceSelection to enforce that input is always from the suggestion list.
<AutoComplete forceSelection v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" />
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. In addition optiongroup, chip, header and footer slots are provided for further customization
<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>
Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| suggestions | array | null | An array of suggestions to display. |
| field | any | null | Property name or getter function of a suggested object to resolve and display. *Deprecated since v3.16.0. Use 'optionLabel' property instead. |
| optionLabel | string | function | null | Property name or getter function to use as the label of an option. |
| optionDisabled | string | function | null | Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. |
| optionGroupLabel | string | null | Property name or getter function to use as the label of an option group. |
| optionGroupChildren | string | null | Property name or getter function that refers to the children options of option group. |
| 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. |
| autoHighlight | boolean | false | Highlights automatically the first item of the dropdown to be selected. *Deprecated since v3.16.0. |
| multiple | boolean | false | Specifies if multiple values can be selected. |
| placeholder | string | null | Default text to display when no option is selected. |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| dataKey | string | null | A property to uniquely identify an option. |
| minLength | number | 1 | Minimum number of characters to initiate a search. |
| delay | number | 300 | Delay between keystrokes to wait before sending a query. |
| appendTo | string | body | A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself. |
| forceSelection | boolean | false | When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions. |
| completeOnFocus | boolean | false | Whether to run a query when input receives focus. |
| inputId | string | null | Identifier of the underlying input element. |
| inputStyle | any | null | Inline style of the input field. |
| inputClass | string | null | Style class of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component. |
| panelStyle | any | null | Inline style of the overlay panel. |
| panelClass | string | null | Style class of the overlay panel. |
| panelProps | object | null | Uses to pass all properties of the HTMLDivElement to the overlay panel. |
| dropdownIcon | string | pi pi-chevron-down | Icon to display in dropdown |
| dropdownClass | string | null | Style class of the dropdown button. |
| loadingIcon | string | pi pi-spinner | Icon class used when loading |
| removeTokenIcon | string | pi pi-times-circle | Icon to display in chip remove action |
| virtualScrollerOptions | object | null | Whether to use the virtualScroller feature. The properties of |
| autoOptionFocus | boolean | true | Whether to focus on the first visible or selected element when the overlay panel is shown. |
| selectOnFocus | boolean | false | When enabled, the focused option is selected. |
| searchLocale | string | undefined | Locale to use in searching. The default locale is the host environment's current locale. |
| searchMessage | string | {0} results are available | Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration. |
| selectionMessage | string | {0} items selected | Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration. |
| emptySelectionMessage | string | No selected item | Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration. |
| emptySearchMessage | string | No results found | Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| Name | Parameters | Description |
|---|---|---|
| change |
event.originalEvent: Original event event.value: Selected option value |
Callback to invoke on value change. |
| focus | event | Callback to invoke when the component receives focus. |
| blur | event | Callback to invoke when the component loses focus. |
| item-select |
event.originalEvent: Browser event event.value: Selected item |
Callback to invoke when a suggestion is selected. |
| item-unselect |
event.originalEvent: Browser event event.value: Unselected item |
Callback to invoke when a selected value is removed. |
| dropdown-click |
event.originalEvent: browser event event.query: Current value of the input field |
Callback to invoke to when dropdown button is clicked. |
| clear | - | 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. |
| before-show | - | Callback to invoke before the overlay is shown. |
| before-hide | - | Callback to invoke before the overlay is hidden. |
| show | - | Callback to invoke when the overlay is shown. |
| hide | - | Callback to invoke when the overlay is hidden. |
| Name | Parameters |
|---|---|
| chip | value: A value in the selection |
| header |
value: Value of the component suggestions: Displayed options |
| footer |
value: Value of the component suggestions: Displayed options |
| item *Deprecated since v3.16.0 |
item: Option instance index: Index of the option |
| option |
option: Option instance index: Index of the option |
| optiongroup |
item: OptionGroup instance *Deprecated since v3.16.0 option: OptionGroup instance index: Index of the option group |
| content |
items: An array of objects to display for virtualscroller styleClass: Style class of the component contentRef: Referance of the content getItemOptions: Options of the items |
| loader | options: Options of the loader items for virtualscroller |
Following is the list of structural style classes
| Name | Element |
|---|---|
| p-autocomplete | Container element |
| p-autocomplete-panel | Overlay panel of suggestions. |
| p-autocomplete-items | List container of suggestions. |
| p-autocomplete-item | List item of a suggestion. |
| p-autocomplete-token | Element of a selected item in multiple mode. |
| p-autocomplete-token-icon | Close icon element of a selected item in multiple mode. |
| p-autocomplete-token-label | Label of a selected item in multiple mode. |
| p-overlay-open | Container element when overlay is visible. |
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list.
In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.
The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.
<label for="ac1">Username</label>
<AutoComplete inputId="ac1" />
<span id="ac2">Email</span>
<AutoComplete aria-labelledby="ac2" />
<AutoComplete aria-label="City" />
| Key | Function |
|---|---|
| tab | Moves focus to the autocomplete element. |
| any printable character | Opens the popup and moves focus to the first option. |
| Key | Function |
|---|---|
| tab | Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page. |
| shift + tab | Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page. |
| enter | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
| space | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
| escape | Closes the popup, then moves focus to the autocomplete element. |
| down arrow | Moves focus to the next option, if there is none then visual focus does not change. |
| up arrow | Moves focus to the previous option, if there is none then visual focus does not change. |
| alt + up arrow | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
| left arrow | Removes the visual focus from the current option and moves input cursor to one character left. |
| right arrow | Removes the visual focus from the current option and moves input cursor to one character right. |
| home | Moves input cursor at the end, if not then moves focus to the first option. |
| end | Moves input cursor at the beginning, if not then moves focus to the last option. |
| pageUp | Jumps visual focus to first option. |
| pageDown | Jumps visual focus to last option. |
| Key | Function |
|---|---|
| backspace | Deletes the previous chip if the input field is empty. |
| left arrow | Moves focus to the previous chip if available and input field is empty. |
| Key | Function |
|---|---|
| left arrow | Moves focus to the previous chip if available. |
| right arrow | Moves focus to the next chip, if there is none then input field receives the focus. |
| backspace | Deletes the chips and adds focus to the input field. |
None.