AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete handler gets the query text as event.query property and should update the suggestions with the search results. Use optionLabel to display a property of an object as the suggestion label.

Enabling dropdown property displays a trigger button next to the input field. The dropdownMode property defines the behavior of the button, blank sends an empty query and current sends the current value of the input.

Customize option content with the option slot.

Options can be grouped by category using the optionGroupLabel and optionGroupChildren properties.

Customize group headers with the optiongroup slot.

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.

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

When showClear is enabled, a clear icon is displayed to reset the value.

The fluid prop makes the component take up the full width of its container when set to true.

Compose a loading indicator alongside the autocomplete input using InputGroup.

AutoComplete provides small and large sizes as alternatives to the base.

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

When disabled is present, the element cannot be edited and focused.

The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation libraries.

Customize keyboard and mouse focus behavior with autoOptionFocus, selectOnFocus, and focusOnHover properties.

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 offers multiple slots for customization through templating.

Virtual scrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable virtual scrolling to avoid performance issues. Configuration of the scroll behavior is defined with virtualScrollerOptions that requires itemSize as the mandatory value to set the height of an item. Visit VirtualScroller documentation for more information about the configuration API.

AutoComplete integrates seamlessly with the PrimeVue Forms library.

Screen Reader

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

Keyboard Support

Chips Input Keyboard Support

Chip Keyboard Support