diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
index 98fcd885e..b0bdea271 100644
--- a/api-generator/components/autocomplete.js
+++ b/api-generator/components/autocomplete.js
@@ -17,6 +17,18 @@ const AutoCompleteProps = [
         default: "null",
         description: "Property name or getter function of a suggested object to resolve and display."
     },
+    {
+        name: "optionLabel",
+        type: "string | function",
+        default: "null",
+        description: "Property name or getter function to use as the label of an option."
+    },
+    {
+        name: "optionDisabled",
+        type: "boolean",
+        default: "null",
+        description: "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+    },
     {
         name: "optionGroupLabel",
         type: "string",
@@ -59,18 +71,30 @@ const AutoCompleteProps = [
         default: "false",
         description: "Specifies if multiple values can be selected."
     },
+    {
+        name: "placeholder",
+        type: "string",
+        default: "null",
+        description: "Default text to display when no option is selected."
+    },
+    {
+        name: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that the component should be disabled."
+    },
+    {
+        name: "dataKey",
+        type: "string",
+        default: "null",
+        description: "A property to uniquely identify an option."
+    },
     {
         name: "minLength",
         type: "number",
         default: "1",
         description: "Minimum number of characters to initiate a search."
     },
-    {
-        name: "completeOnFocus",
-        type: "boolean",
-        default: "false",
-        description: "Whether to run a query when input receives focus."
-    },
     {
         name: "delay",
         type: "number",
@@ -83,9 +107,27 @@ const AutoCompleteProps = [
         default: "body",
         description: '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.'
     },
+    {
+        name: "forceSelection",
+        type: "boolean",
+        default: "false",
+        description: "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
+    },
+    {
+        name: "completeOnFocus",
+        type: "boolean",
+        default: "false",
+        description: "Whether to run a query when input receives focus."
+    },
+    {
+        name: "inputId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
     {
         name: "inputStyle",
-        type: "any",
+        type: "object",
         default: "null",
         description: "Inline style of the input field."
     },
@@ -96,22 +138,16 @@ const AutoCompleteProps = [
         description: "Style class of the input field."
     },
     {
-        name: "forceSelection",
-        type: "boolean",
-        default: "false",
-        description: "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
+        name: "inputProps",
+        type: "object",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component."
     },
     {
-        name: "class",
-        type: "string",
+        name: "panelStyle",
+        type: "object",
         default: "null",
-        description: "Style class of the component."
-    },
-    {
-        name: "style",
-        type: "any",
-        default: "null",
-        description: "Inline of the component."
+        description: "Inline style of the overlay panel."
     },
     {
         name: "panelClass",
@@ -119,6 +155,12 @@ const AutoCompleteProps = [
         default: "null",
         description: "Style class of the overlay panel."
     },
+    {
+        name: "panelProps",
+        type: "object",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component."
+    },
     {
         name: "loadingIcon",
         type: "string",
@@ -130,23 +172,99 @@ const AutoCompleteProps = [
         type: "object",
         default: "null",
         description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+    },
+    {
+        name: "autoOptionFocus",
+        type: "boolean",
+        default: "true",
+        description: "Whether to focus on the first visible or selected element when the overlay panel is shown."
+    },
+    {
+        name: "searchLocale",
+        type: "string",
+        default: "undefined",
+        description: "Locale to use in searching. The default locale is the host environment's current locale."
+    },
+    {
+        name: "searchMessage",
+        type: "string",
+        default: "{0} results are available",
+        description: "Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration."
+    },
+    {
+        name: "selectionMessage",
+        type: "string",
+        default: "{0} items selected",
+        description: "Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration."
+    },
+    {
+        name: "emptySelectionMessage",
+        type: "string",
+        default: "No selected item",
+        description: "Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration."
+    },
+    {
+        name: "emptySearchMessage",
+        type: "string",
+        default: "No results found",
+        description: "Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration."
+    },
+    {
+        name: "tabindex",
+        type: "number",
+        default: "0",
+        description: "Index of the element in tabbing order."
+    },
+    {
+        name: "ariaLabel",
+        type: "string",
+        default: "null",
+        description: "Defines a string value that labels an interactive element."
+    },
+    {
+        name: "ariaLabelledby",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
     }
 ];
 
 const AutoCompleteEvents = [
     {
-        name: "complete",
-        description: "Callback to invoke to search for suggestions.",
+        name: "change",
+        description: "Callback to invoke on value change.",
         arguments: [
             {
-                name: "originalEvent",
+                name: "event.originalEvent",
                 type: "object",
-                description: "Original event"
+                description: "Browser event"
             },
             {
-                name: "query",
+                name: "event.value",
                 type: "string",
-                description: "Value to search with"
+                description: "Selected option value"
+            }
+        ]
+    },
+    {
+        name: "focus",
+        description: "Callback to invoke when component receives focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
+            }
+        ]
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke when component loses focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
             }
         ]
     },
@@ -201,17 +319,45 @@ const AutoCompleteEvents = [
     {
         name: "clear",
         description: "Callback to invoke when input is cleared by the user."
+    },
+    {
+        name: "complete",
+        description: "Callback to invoke to search for suggestions.",
+        arguments: [
+            {
+                name: "originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "query",
+                type: "string",
+                description: "Value to search with"
+            }
+        ]
+    },
+    {
+        name: "before-show",
+        description: "Callback to invoke before the overlay is shown."
+    },
+    {
+        name: "before-hide",
+        description: "Callback to invoke before the overlay is hidden."
+    },
+    {
+        name: "show",
+        description: "Callback to invoke when the overlay is shown."
+    },
+    {
+        name: "hide",
+        description: "Callback to invoke when the overlay is hidden."
     }
 ];
 
 const AutoCompleteSlots = [
     {
-        name: "item",
-        description: "Custom content for the item."
-    },
-    {
-        name: "optiongroup",
-        description: "Custom content for the optiongroup item."
+        name: "chip",
+        description: "Custom content for the chip display."
     },
     {
         name: "header",
@@ -222,8 +368,16 @@ const AutoCompleteSlots = [
         description: "Custom content for the component footer."
     },
     {
-        name: "chip",
-        description: "Custom content for the chip display."
+        name: "item",
+        description: "Custom content for the item."
+    },
+    {
+        name: "option",
+        description: "Custom content for the item."
+    },
+    {
+        name: "optiongroup",
+        description: "Custom content for the optiongroup item."
     },
     {
         name: "content",
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 6d2f860e4..c0756d99b 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -4,10 +4,27 @@ import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscro
 
 type AutoCompleteFieldType = string | ((data: any) => string) | undefined;
 
+type AutoCompleteOptionLabelType = string | ((data: any) => string) | undefined;
+
+type AutoCompleteOptionDisabledType = string | ((data: any) => boolean) | undefined;
+
+type AutoCompleteOptionChildrenType = string | ((data: any) => any[]) | undefined;
+
 type AutoCompleteDropdownMode = 'blank' | 'current' | undefined;
 
 type AutoCompleteAppendTo = 'body' | 'self' | string | undefined | HTMLElement;
 
+export interface AutoCompleteChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Selected option value
+     */
+    value: any;
+}
+
 export interface AutoCompleteItemSelectEvent {
     /**
      * Browser event
@@ -56,18 +73,31 @@ export interface AutoCompleteProps {
      */
     suggestions?: any[];
     /**
+     * @deprecated since v3.16.0. Use 'optionLabel' property instead.
      * Property name or getter function of a suggested object to resolve and display.
      * @type {AutoCompleteFieldType}
      */
     field?: AutoCompleteFieldType;
     /**
-     * Property name or getter function to use as the label of an option group.
+     * Property name or getter function to use as the label of an option.
+     * @see AutoCompleteOptionLabelType
      */
-    optionGroupLabel?: string | undefined;
+    optionLabel?: AutoCompleteOptionLabelType;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     * @see AutoCompleteOptionDisabledType
+     */
+    optionDisabled?: AutoCompleteOptionDisabledType;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     * @see AutoCompletenOptionLabelType
+     */
+    optionGroupLabel?: AutoCompletenOptionLabelType;
     /**
      * Property name or getter function that refers to the children options of option group.
+     * @see AutoCompleteOptionChildrenType
      */
-    optionGroupChildren?: string | undefined;
+    optionGroupChildren?: AutoCompleteOptionChildrenType;
     /**
      * Maximum height of the suggestions panel.
      * Default value is '200px'.
@@ -84,6 +114,7 @@ export interface AutoCompleteProps {
      */
     dropdownMode?: AutoCompleteDropdownMode;
     /**
+     * @deprecated since v3.16.0
      * Highlights automatically the first item of the dropdown to be selected.
      */
     autoHighlight?: boolean | undefined;
@@ -91,6 +122,18 @@ export interface AutoCompleteProps {
      * Specifies if multiple values can be selected.
      */
     multiple?: boolean | undefined;
+    /**
+     * Default text to display when no option is selected.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
     /**
      * Minimum number of characters to initiate a search.
      * Default value is 1.
@@ -116,6 +159,10 @@ export interface AutoCompleteProps {
      * Whether to run a query when input receives focus.
      */
     completeOnFocus?: boolean | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
     /**
      * Inline style of the input field.
      */
@@ -123,19 +170,23 @@ export interface AutoCompleteProps {
     /**
      * Style class of the input field.
      */
-    inputClass?: string;
+    inputClass?: any;
     /**
-     * Inline style of the component.
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
      */
-    class?: any;
+    inputProps?: HTMLInputElement | undefined;
     /**
-     * Style class of the component input field.
+     * Inline style of the overlay panel.
      */
-    style?: any;
+    panelStyle?: any;
     /**
      * Style class of the overlay panel.
      */
     panelClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     */
+    panelProps?: HTMLDivElement | undefined;
     /**
      * Icon to display in loading state.
      * Default value is 'pi pi-spinner pi-spin'.
@@ -146,36 +197,59 @@ export interface AutoCompleteProps {
      * @see VirtualScroller.VirtualScrollerProps
      */
     virtualScrollerOptions?: VirtualScrollerProps;
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * Default value is true.
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * Locale to use in searching. The default locale is the host environment's current locale.
+     */
+    searchLocale?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} results are available'.
+     */
+    searchMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is '{0} items selected'.
+     */
+    selectionMessage?: string | undefined;
+    /**
+     * Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No selected item'.
+     */
+    emptySelectionMessage?: string | undefined;
+    /**
+     * Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
+     * Default value is 'No results found'.
+     */
+    emptySearchMessage?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    ariaLabelledby?: string | undefined;
 }
 
 export interface AutoCompleteSlots {
     /**
-     * Custom content for each item.
-     * @param {Object} scope - item slot's params.
+     * Custom chip template.
+     * @param {Object} scope - chip slot's params.
      */
-    item: (scope: {
+    chip: (scope: {
         /**
-         * Option instance
+         * A value in the selection
          */
-        item: any;
-        /**
-         * Index of the option
-         */
-        index: number;
-    }) => VNode[];
-    /**
-     * Custom option group template.
-     * @param {Object} scope - option group slot's params.
-     */
-    optiongroup: (scope: {
-        /**
-         * Option instance
-         */
-        item: any;
-        /**
-         * Index of the option
-         */
-        index: number;
+        value: any;
     }) => VNode[];
     /**
      * Custom header template of panel.
@@ -206,14 +280,52 @@ export interface AutoCompleteSlots {
         suggestions: any[];
     }) => VNode[];
     /**
-     * Custom chip template.
-     * @param {Object} scope - chip slot's params.
+     * @deprecated since v3.16.0
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
      */
-    chip: (scope: {
+    item: (scope: {
         /**
-         * A value in the selection
+         * Option instance
          */
-        value: any;
+        item: any;
+        /**
+         * Index of the option
+         */
+        index: number;
+    }) => VNode[];
+    /**
+     * Custom option template.
+     * @param {Object} scope - option slot's params.
+     */
+    option: (scope: {
+        /**
+         * Option instance
+         */
+        option: any;
+        /**
+         * Index of the option
+         */
+        index: number;
+    }) => VNode[];
+    /**
+     * Custom option group template.
+     * @param {Object} scope - option group slot's params.
+     */
+    optiongroup: (scope: {
+        /**
+         * @deprecated since v3.16.0. Use the 'option' instead.
+         * Option instance
+         */
+        item: any;
+        /**
+         * Option instance
+         */
+        option: any;
+        /**
+         * Index of the option
+         */
+        index: number;
     }) => VNode[];
     /**
      * Custom panel template.
@@ -258,6 +370,21 @@ export declare type AutoCompleteEmits = {
      * @param {*} value - New value.
      */
     'update:modelValue': (value: any) => void;
+    /**
+     * Callback to invoke on value change.
+     * @param {AutoCompleteChangeEvent} event - Custom change event.
+     */
+    'change': (event: AutoCompleteChangeEvent) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': (event: Event) => void;
     /**
      * Callback to invoke when a suggestion is selected.
      * @param {AutoCompleteItemSelectEvent} event - Custom item select event.
@@ -273,15 +400,31 @@ export declare type AutoCompleteEmits = {
      * @param {AutoCompleteDropdownClickEvent} event - Custom dropdown click event.
      */
     'dropdown-click': (event: AutoCompleteDropdownClickEvent) => void;
+    /**
+     * Callback to invoke when input is cleared by the user.
+     */
+    'clear': () => void;
     /**
      * Callback to invoke to search for suggestions.
      * @param {AutoCompleteCompleteEvent} event - Custom complete event.
      */
     'complete': (event: AutoCompleteCompleteEvent) => void;
     /**
-     * Callback to invoke when input is cleared by the user.
+     * Callback to invoke before the overlay is shown.
      */
-    'clear': () => void;
+    'before-show': () => void;
+    /**
+     * Callback to invoke before the overlay is hidden.
+     */
+    'before-hide': () => void;
+    /**
+     * Callback to invoke when the overlay is shown.
+     */
+    'show': () => void;
+    /**
+     * Callback to invoke when the overlay is hidden.
+     */
+    'hide': () => void;
 }
 
 declare class AutoComplete extends ClassComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits> { }
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 71a2991e2..b3f94e8b8 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -1,54 +1,61 @@
 <template>
-    <span ref="container" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
-        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @click="onInputClicked" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange"
-            type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
-        <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
-            <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
-                <slot name="chip" :value="item">
-                    <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
+    <div ref="container" :class="containerClass" @click="onContainerClick">
+        <input v-if="!multiple" ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputStyleClass" :value="inputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
+            role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
+        <ul v-if="multiple" ref="multiContainer" :class="multiContainerClass" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
+            @focus="onMultipleContainerFocus" @blur="onMultipleContainerBlur" @keydown="onMultipleContainerKeyDown">
+            <li v-for="(option, i) of modelValue" :key="i" :id="id + '_multiple_option_' + i" :class="['p-autocomplete-token', {'p-focus': focusedMultipleOptionIndex === i}]"
+                role="option" :aria-label="getOptionLabel(option)" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
+                <slot name="chip" :value="option">
+                    <span class="p-autocomplete-token-label">{{getOptionLabel(option)}}</span>
                 </slot>
-                <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
+                <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeOption($event, option, i)" aria-hidden="true"></span>
             </li>
-            <li class="p-autocomplete-input-token">
-                <input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"  @change="onChange"
-                    role="searchbox" aria-autocomplete="list" :aria-controls="listId">
+            <li class="p-autocomplete-input-token" role="option">
+                <input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
+                    role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
+                    @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
             </li>
         </ul>
-        <i :class="loadingIconClass" v-if="searching"></i>
-        <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
+        <i v-if="searching" :class="loadingIconClass" aria-hidden="true"></i>
+        <Button v-if="dropdown" ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" tabindex="-1" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" />
+        <span role="status" aria-live="polite" class="p-hidden-accessible">
+            {{searchResultMessageText}}
+        </span>
         <Portal :appendTo="appendTo">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
-                    <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
-                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="suggestions" :disabled="virtualScrollerDisabled">
-                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
-                            <ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
-                                <template v-if="!optionGroupLabel">
-                                    <li v-for="(item, i) of items" class="p-autocomplete-item" :key="getOptionRenderKey(item)" @click="selectItem($event, item)" role="option" v-ripple :data-index="getOptionIndex(i, getItemOptions)">
-                                        <slot name="item" :item="item" :index="getOptionIndex(i, getItemOptions)">{{getItemContent(item)}}</slot>
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : ''}" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
+                    <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
+                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
+                                <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
+                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-autocomplete-item-group" role="option">
+                                        <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                                    </li>
+                                    <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
+                                        :class="['p-autocomplete-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
+                                        role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                        @click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
+                                        <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
+                                        <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot> <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
-                                <template v-else>
-                                    <template v-for="(optionGroup, i) of items" :key="getOptionGroupRenderKey(optionGroup)">
-                                        <li  class="p-autocomplete-item-group">
-                                            <slot name="optiongroup" :item="optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(optionGroup)}}</slot>
-                                        </li>
-                                        <li v-for="(item, j) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="j" @click="selectItem($event, item)" role="option" v-ripple :data-group="i" :data-index="getOptionIndex(j, getItemOptions)">
-                                            <slot name="item" :item="item" :index="getOptionIndex(j, getItemOptions)">{{getItemContent(item)}}</slot>
-                                        </li>
-                                    </template>
-                                </template>
                             </ul>
+                            <span role="status" aria-live="polite" class="p-hidden-accessible">
+                                {{selectedMessageText}}
+                            </span>
                         </template>
-                        <template v-slot:loader="{ options }" v-if="$slots.loader">
+                        <template v-if="$slots.loader" v-slot:loader="{ options }">
                             <slot name="loader" :options="options"></slot>
                         </template>
                     </VirtualScroller>
-                    <slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
+                    <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
                 </div>
             </transition>
         </Portal>
-    </span>
+    </div>
 </template>
 
 <script>
@@ -61,18 +68,19 @@ import Portal from 'primevue/portal';
 
 export default {
     name: 'AutoComplete',
-    inheritAttrs: false,
-    emits: ['update:modelValue', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     props: {
         modelValue: null,
         suggestions: {
             type: Array,
             default: null
         },
-        field: {
+        field: { // TODO: Deprecated since v3.16.0
             type: [String,Function],
             default: null
         },
+        optionLabel: null,
+        optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
         scrollHeight: {
@@ -87,7 +95,7 @@ export default {
             type: String,
             default: 'blank'
         },
-        autoHighlight: {
+        autoHighlight: { // TODO: Deprecated since v3.16.0
             type: Boolean,
             default: false
         },
@@ -95,6 +103,18 @@ export default {
             type: Boolean,
             default: false
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        dataKey: {
+            type: String,
+            default: null
+        },
         minLength: {
             type: Number,
             default: 1
@@ -115,45 +135,95 @@ export default {
             type: Boolean,
             default: false
         },
-        inputClass: null,
+        inputId: String,
         inputStyle: null,
-        class: null,
-        style: null,
+        inputClass: null,
+        inputProps: null,
+        panelStyle: null,
         panelClass: null,
+        panelProps: null,
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner'
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
         },
-        loadingIcon: {
+        autoOptionFocus: {
+            type: Boolean,
+            default: true
+        },
+        searchLocale: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
+        },
+        searchMessage: {
+            type: String,
+            default: null
+        },
+        selectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySelectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySearchMessage: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        ariaLabel: {
+            type: String,
+            default: null
+        },
+        ariaLabelledby: {
+            type: String,
+            default: null
         }
     },
-    timeout: null,
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
     overlay: null,
     virtualScroller: null,
+    searchTimeout: null,
+    selectOnFocus: false,
+    focusOnHover: false,
     data() {
         return {
-            searching: false,
+            id: UniqueComponentId(),
             focused: false,
+            focusedOptionIndex: -1,
+            focusedMultipleOptionIndex: -1,
             overlayVisible: false,
-            inputTextValue: null,
-            highlightItem: null
-        };
+            searching: false
+        }
     },
     watch: {
         suggestions() {
             if (this.searching) {
-                if (this.suggestions && this.suggestions.length)
-                    this.showOverlay();
-                else
-                    this.hideOverlay();
-
+                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : this.hide();
+                this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstOptionIndex() : -1;
                 this.searching = false;
             }
+
+            this.autoUpdateModel();
+        }
+    },
+    mounted() {
+        this.id = this.$attrs.id || this.id;
+
+        this.autoUpdateModel();
+    },
+    updated() {
+        if (this.overlayVisible) {
+            this.alignOverlay();
         }
     },
     beforeUnmount() {
@@ -170,20 +240,21 @@ export default {
             this.overlay = null;
         }
     },
-    updated() {
-        if (this.overlayVisible) {
-            this.alignOverlay();
-        }
-    },
     methods: {
         getOptionIndex(index, fn) {
             return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
         },
-        getOptionRenderKey(option) {
-            return this.getItemContent(option);
+        getOptionLabel(option) {
+            return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
         },
-        getOptionGroupRenderKey(optionGroup) {
-            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
+        getOptionValue(option) {
+            return option; // TODO: The 'optionValue' properties can be added.
+        },
+        getOptionRenderKey(option, index) {
+            return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
         getOptionGroupLabel(optionGroup) {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
@@ -191,28 +262,378 @@ export default {
         getOptionGroupChildren(optionGroup) {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
+        getAriaPosInset(index) {
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+        },
+        show(isFocus) {
+            this.$emit('before-show');
+            this.overlayVisible = true;
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstOptionIndex() : -1);
+
+            isFocus && this.$refs.focusInput.focus();
+        },
+        hide(isFocus) {
+            const _hide = () => {
+                this.$emit('before-hide');
+                this.overlayVisible = false;
+                this.focusedOptionIndex = -1;
+
+                isFocus && this.$refs.focusInput.focus();
+            }
+
+            setTimeout(() => { _hide() }, 0); // For ScreenReaders
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstOptionIndex() : -1;
+            this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                    this.onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    this.onTabKey(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKey(event);
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onInput(event) {
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+
+            let query = event.target.value;
+            if (!this.multiple) {
+                this.updateModel(event, query);
+            }
+
+            if (query.length === 0) {
+                this.hide();
+                this.$emit('clear');
+            }
+            else {
+                if (query.length >= this.minLength) {
+                    this.focusedOptionIndex = -1;
+
+                    this.searchTimeout = setTimeout(() => {
+                        this.search(event, query, 'input');
+                    }, this.delay);
+                }
+                else {
+                    this.hide();
+                }
+            }
+        },
+        onChange(event) {
+            if (this.forceSelection) {
+                let valid = false;
+
+                if (this.visibleOptions)  {
+                    const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
+
+                    if (matchedValue !== undefined) {
+                        valid = true;
+                        !this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);
+                    }
+                }
+
+                if (!valid) {
+                    this.$refs.focusInput.value = '';
+                    this.$emit('clear');
+                    !this.multiple && this.updateModel(event, null);
+                }
+            }
+        },
+        onMultipleContainerFocus() {
+            this.focused = true;
+        },
+        onMultipleContainerBlur() {
+            this.focusedMultipleOptionIndex = -1;
+            this.focused = false;
+        },
+        onMultipleContainerKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onArrowLeftKeyOnMultiple(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKeyOnMultiple(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKeyOnMultiple(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onContainerClick(event) {
+            if (this.disabled || this.searching) {
+                return;
+            }
+
+            if (this.isDropdownClicked(event) || event.target.tagName === 'INPUT') {
+                return;
+            }
+            else if (!this.overlay || !this.overlay.contains(event.target)) {
+                if (this.completeOnFocus) {
+                    this.search(event, '', 'click');
+                }
+
+                this.$refs.focusInput.focus();
+            }
+        },
+        onDropdownClick(event) {
+            this.$refs.focusInput.focus();
+            const query = this.$refs.focusInput.value;
+
+            if (this.dropdownMode === 'blank')
+                this.search(event, '', 'dropdown');
+            else if (this.dropdownMode === 'current')
+                this.search(event, query, 'dropdown');
+
+            this.$emit('dropdown-click', { originalEvent: event, query });
+        },
+        onOptionSelect(event, option) {
+            const value = this.getOptionValue(option);
+
+            if (this.multiple) {
+                this.$refs.focusInput.value = '';
+
+                if (!this.isSelected(option)) {
+                    this.updateModel(event, [...(this.modelValue || []), value]);
+                }
+            }
+            else {
+                this.updateModel(event, value);
+            }
+
+            this.$emit('item-select', { originalEvent: event, value: option });
+
+            this.$refs.focusInput.focus();
+            this.hide();
+        },
+        onOptionMouseMove(event, index) {
+            if (this.focusOnHover) {
+                this.changeFocusedOptionIndex(event, index);
+            }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
+        },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstOptionIndex();
+
+            this.changeFocusedOptionIndex(event, optionIndex);
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            if (event.altKey) {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.overlayVisible && this.hide();
+                event.preventDefault();
+            }
+            else {
+                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastOptionIndex();
+
+                this.changeFocusedOptionIndex(event, optionIndex);
+
+                event.preventDefault();
+            }
+        },
+        onArrowLeftKey(event) {
+            const target = event.currentTarget;
+            this.focusedOptionIndex = -1;
+
+            if (this.multiple && ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
+                this.$refs.multiContainer.focus();
+                this.focusedMultipleOptionIndex = this.modelValue.length;
+            }
+        },
+        onArrowRightKey() {
+            this.focusedOptionIndex = -1;
+        },
+        onHomeKey(event) {
+            event.currentTarget.setSelectionRange(0, 0);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const target = event.currentTarget;
+            const len = target.value.length;
+            target.setSelectionRange(len, len);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView(0);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView(this.visibleOptions.length - 1);
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (!this.overlayVisible) {
+                this.onArrowDownKey(event);
+            }
+            else {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.hide();
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            this.overlayVisible && this.hide(true);
+            event.preventDefault();
+        },
+        onTabKey(event) {
+            if (this.focusedOptionIndex !== -1) {
+                this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            }
+
+            this.overlayVisible && this.hide();
+        },
+        onBackspaceKey(event) {
+            if (this.multiple) {
+                if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
+                    const removedValue = this.modelValue[this.modelValue.length - 1];
+                    const newValue = this.modelValue.slice(0, -1);
+
+                    this.$emit('update:modelValue', newValue);
+                    this.$emit('item-unselect', { originalEvent: event, value: removedValue });
+                }
+            }
+        },
+        onArrowLeftKeyOnMultiple() {
+            this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
+        },
+        onArrowRightKeyOnMultiple() {
+            this.focusedMultipleOptionIndex++;
+
+            if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+                this.focusedMultipleOptionIndex = -1;
+                this.$refs.focusInput.focus();
+            }
+        },
+        onBackspaceKeyOnMultiple(event) {
+            if (this.focusedMultipleOptionIndex !== -1) {
+                this.removeOption(event, this.modelValue[this.focusedMultipleOptionIndex], this.focusedMultipleOptionIndex);
+            }
+        },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
+        },
+        onOverlayAfterEnter() {
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
 
-            if (this.autoHighlight && this.suggestions && this.suggestions.length) {
-                DomHandler.addClass(this.list.firstElementChild, 'p-highlight');
-            }
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
+
+            this.$emit('hide');
             this.overlay = null;
         },
         onOverlayAfterLeave(el) {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
+            let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
             }
@@ -225,17 +646,23 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
         bindScrollListener() {
             if (!this.scrollHandler) {
                 this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 });
             }
@@ -251,7 +678,7 @@ export default {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
                     if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 window.addEventListener('resize', this.resizeListener);
@@ -270,79 +697,36 @@ export default {
             if (this.multiple)
                 return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
             else
-                return event.target === this.$refs.input;
+                return event.target === this.$refs.focusInput;
         },
         isDropdownClicked(event) {
             return this.$refs.dropdownButton ? (event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target)) : false;
         },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
-                this.outsideClickListener = null;
-            }
+        isOptionGroup(option) {
+            return this.optionGroupLabel && option.optionGroup && option.group;
         },
-        selectItem(event, item) {
-            if (this.multiple) {
-                this.$refs.input.value = '';
-                this.inputTextValue = '';
-
-                if (!this.isSelected(item)) {
-                    let newValue = this.modelValue ? [...this.modelValue, item] : [item];
-                    this.$emit('update:modelValue', newValue);
-                }
-            }
-            else {
-                this.$emit('update:modelValue', item);
-            }
-
-            this.$emit('item-select', {
-                originalEvent: event,
-                value: item
-            });
-
-            this.focus();
-            this.hideOverlay();
+        isOptionMatched(option, value) {
+            return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
         },
-        onMultiContainerClick(event) {
-            this.focus();
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
+        isValidOption(option) {
+            return option && !(this.isOptionDisabled(option) || option.optionGroup);
         },
-        removeItem(event, index) {
-            let removedValue = this.modelValue[index];
-            let newValue = this.modelValue.filter((val, i) => (index !== i));
-            this.$emit('update:modelValue', newValue);
-            this.$emit('item-unselect', {
-                originalEvent: event,
-                value: removedValue
-            });
+        isSelected(option) {
+            return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
-        onDropdownClick(event) {
-            this.focus();
-            const query = this.$refs.input.value;
-
-            if (this.dropdownMode === 'blank')
-                this.search(event, '', 'dropdown');
-            else if (this.dropdownMode === 'current')
-                this.search(event, query, 'dropdown');
-
-            this.$emit('dropdown-click', {
-                originalEvent: event,
-                query: query
-            });
+        findFirstOptionIndex() {
+            return this.visibleOptions.findIndex(option => this.isValidOption(option));
         },
-        getItemContent(item) {
-            return this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
+        findLastOptionIndex() {
+            return this.visibleOptions.findLastIndex(option => this.isValidOption(option));
         },
-        showOverlay() {
-            this.overlayVisible = true;
+        findNextOptionIndex(index) {
+            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
-        hideOverlay() {
-            this.overlayVisible = false;
-        },
-        focus() {
-            this.$refs.input.focus();
+        findPrevOptionIndex(index) {
+            const matchedOptionIndex = index > 0 ? this.visibleOptions.slice(0, index).findLastIndex(option => this.isValidOption(option)) : -1;
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         search(event, query, source) {
             //allow empty string but not undefined or null
@@ -356,248 +740,82 @@ export default {
             }
 
             this.searching = true;
-            this.$emit('complete', {
-                originalEvent: event,
-                query: query
-            });
+            this.$emit('complete', { originalEvent: event, query });
         },
-        onInputClicked(event) {
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
+        removeOption(event, option, index) {
+            const removedOption = this.modelValue[index];
+            const value = this.modelValue.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey)).map(option => this.getOptionValue(option));
+
+            this.updateModel(event, value);
+            this.$emit('item-unselect', { originalEvent: event, value: removedOption });
+            this.$refs.focusInput.focus();
         },
-        onInput(event) {
-            this.inputTextValue = event.target.value;
+        changeFocusedOptionIndex(event, index) {
+            if (this.focusedOptionIndex !== index) {
+                this.focusedOptionIndex = index;
+                this.scrollInView();
 
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-            }
-
-            let query = event.target.value;
-            if (!this.multiple) {
-                this.$emit('update:modelValue', query);
-            }
-
-            if (query.length === 0) {
-                this.hideOverlay();
-                this.$emit('clear');
-            }
-            else {
-                if (query.length >= this.minLength) {
-                    this.timeout = setTimeout(() => {
-                        this.search(event, query, 'input');
-                    }, this.delay);
-                }
-                else {
-                    this.hideOverlay();
+                if (this.selectOnFocus || this.autoHighlight) {
+                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
                 }
             }
         },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
-        },
-        onKeyDown(event) {
-            if (this.overlayVisible) {
-                let highlightItem = DomHandler.findSingle(this.list, 'li.p-highlight');
-
-                switch(event.which) {
-                    //down
-                    case 40:
-                        if (highlightItem) {
-                            let nextElement = this.findNextItem(highlightItem);
-                            if (nextElement) {
-                                DomHandler.addClass(nextElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                nextElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-                        else {
-                            highlightItem = this.list.firstElementChild;
-                            if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
-                                highlightItem = this.findNextItem(highlightItem);
-                            }
-
-                            if (highlightItem) {
-                                DomHandler.addClass(highlightItem, 'p-highlight');
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //up
-                    case 38:
-                        if (highlightItem) {
-                            let previousElement = this.findPrevItem(highlightItem);
-                            if (previousElement) {
-                                DomHandler.addClass(previousElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                previousElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //enter
-                    case 13:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                            this.hideOverlay();
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //escape
-                    case 27:
-                        this.hideOverlay();
-                        event.preventDefault();
-                    break;
-
-                    //tab
-                    case 9:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                        }
-
-                        this.hideOverlay();
-                    break;
-
-                    default:
-                    break;
-                }
+        scrollInView(index = -1) {
+            const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
             }
-
-            if (this.multiple) {
-                switch(event.which) {
-                    //backspace
-                    case 8:
-                        if (this.modelValue && this.modelValue.length && !this.$refs.input.value) {
-                            let removedValue = this.modelValue[this.modelValue.length - 1];
-                            let newValue = this.modelValue.slice(0, -1);
-
-                            this.$emit('update:modelValue', newValue);
-                            this.$emit('item-unselect', {
-                                originalEvent: event,
-                                value: removedValue
-                            });
-                        }
-                    break;
-
-                    default:
-                    break;
-                }
+            else if (!this.virtualScrollerDisabled) {
+                setTimeout(() => {
+                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
+                }, 0);
             }
         },
-        selectHighlightItem(event, item) {
-            if (this.optionGroupLabel) {
-                let optionGroup = this.suggestions[item.dataset.group];
-                this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
-            }
-            else {
-                this.selectItem(event, this.suggestions[item.dataset.index]);
+        autoUpdateModel() {
+            if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption) {
+                this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
+                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
+                this.updateModel(null, this.multiple ? [value] : value);
             }
         },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
-
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
-        },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
-
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
-        },
-        onChange(event) {
-            if (this.forceSelection) {
-                let valid = false;
-                let inputValue = event.target.value.trim();
-
-                if (this.suggestions)  {
-                    for (let item of this.suggestions) {
-                        let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
-                        if (itemValue && inputValue === itemValue.trim()) {
-                            valid = true;
-                            this.selectItem(event, item);
-                            break;
-                        }
-                    }
-                }
-
-                if (!valid) {
-                    this.$refs.input.value = '';
-                    this.inputTextValue = '';
-                    this.$emit('clear');
-                    if (!this.multiple) {
-                        this.$emit('update:modelValue', null);
-                    }
-                }
-            }
-        },
-        isSelected(val) {
-            let selected = false;
-            if (this.modelValue && this.modelValue.length) {
-                for (let i = 0; i < this.modelValue.length; i++) {
-                    if (ObjectUtils.equals(this.modelValue[i], val)) {
-                        selected = true;
-                        break;
-                    }
-                }
-            }
-
-            return selected;
+        updateModel(event, value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { originalEvent: event, value });
         },
         overlayRef(el) {
             this.overlay = el;
         },
         listRef(el, contentRef) {
             this.list = el;
-            contentRef && contentRef(el); // for virtualScroller
+            contentRef && contentRef(el); // For VirtualScroller
         },
         virtualScrollerRef(el) {
             this.virtualScroller = el;
-        },
-        onOverlayClick(event) {
-            OverlayEventBus.emit('overlay-click', {
-                originalEvent: event,
-                target: this.$el
-            });
         }
     },
     computed: {
         containerClass() {
-            return ['p-autocomplete p-component p-inputwrapper', this.class, {
+            return ['p-autocomplete p-component p-inputwrapper', {
+                'p-disabled': this.disabled,
+                'p-focus': this.focused,
                 'p-autocomplete-dd': this.dropdown,
                 'p-autocomplete-multiple': this.multiple,
-                'p-inputwrapper-filled': ((this.modelValue) || (this.inputTextValue && this.inputTextValue.length)),
-                'p-inputwrapper-focus': this.focused
+                'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
+                'p-inputwrapper-focus': this.focused,
+                'p-overlay-open': this.overlayVisible
             }];
         },
-        inputFieldClass() {
+        inputStyleClass() {
             return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
-                'p-autocomplete-dd-input': this.dropdown,
-                'p-disabled': this.$attrs.disabled
+                'p-autocomplete-dd-input': this.dropdown
             }];
         },
         multiContainerClass() {
-            return ['p-autocomplete-multiple-container p-component p-inputtext', {
-                'p-disabled': this.$attrs.disabled,
-                'p-focus': this.focused
-            }];
+            return ['p-autocomplete-multiple-container p-component p-inputtext'];
         },
         panelStyleClass() {
-            return [
-                'p-autocomplete-panel p-component', this.panelClass, {
+            return ['p-autocomplete-panel p-component', this.panelClass, {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
@@ -605,21 +823,68 @@ export default {
         loadingIconClass() {
             return ['p-autocomplete-loader pi-spin', this.loadingIcon];
         },
+        visibleOptions() {
+            let options = this.suggestions || [];
+
+            if (this.optionGroupLabel) {
+                options = options.reduce((result, option, index) => {
+                    result.push({ optionGroup: option, group: true, groupIndex: index });
+
+                    let optionGroupChildren = this.getOptionGroupChildren(option);
+                    optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
+
+                    return result;
+                }, []);
+            }
+
+            return options;
+        },
         inputValue() {
             if (this.modelValue) {
-                if (this.field && typeof this.modelValue === 'object') {
-                    const resolvedFieldData = ObjectUtils.resolveFieldData(this.modelValue, this.field);
-                    return resolvedFieldData != null ? resolvedFieldData : this.modelValue;
+                if (typeof this.modelValue === 'object') {
+                    const label = this.getOptionLabel(this.modelValue);
+                    return label != null ? label : this.modelValue;
                 }
-                else
+                else {
                     return this.modelValue;
+                }
             }
             else {
                 return '';
             }
         },
-        listId() {
-            return UniqueComponentId() + '_list';
+        hasSelectedOption() {
+            return ObjectUtils.isNotEmpty(this.modelValue);
+        },
+        equalityKey() {
+            return this.dataKey; // TODO: The 'optionValue' properties can be added.
+        },
+        searchResultMessageText() {
+            return ObjectUtils.isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
+        },
+        searchMessageText() {
+            return this.searchMessage || this.$primevue.config.locale.searchMessage;
+        },
+        emptySearchMessageText() {
+            return this.emptySearchMessage || this.$primevue.config.locale.emptySearchMessage;
+        },
+        selectionMessageText() {
+            return this.selectionMessage || this.$primevue.config.locale.selectionMessage;
+        },
+        emptySelectionMessageText() {
+            return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage;
+        },
+        selectedMessageText() {
+            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
+        },
+        focusedMultipleOptionId() {
+            return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
+        },
+        ariaSetSize() {
+            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;