# EuiAutocompleteComponent

**Type:** component



`eui-autocomplete` component with dropdown suggestions, optional chip display for multiple selections, and comprehensive keyboard navigation.
Provides type-ahead functionality with filtering, grouping, sorting, and async data support.
Implements ControlValueAccessor for Angular forms integration with validation support.
`eui-autocomplete` supports single or multiple selection modes with chips for visual representation of selected items.
Built on Angular CDK Overlay for positioning and virtual scrolling for performance with large datasets.
`eui-autocomplete` includes accessibility features with ARIA attributes, live announcer, and keyboard navigation.

#### Basic single selection
```html
<eui-autocomplete [autocompleteData]="fruits" placeholder="Select a fruit"></eui-autocomplete>
```

#### Multiple selection with chips
```html
<eui-autocomplete
  [autocompleteData]="countries"
  [hasChips]="true"
  [chipsPosition]="'top'"
  (selectionChange)="onSelectionChange($event)">
</eui-autocomplete>
```

#### With grouping and async data
```html
<eui-autocomplete
  [autocompleteData]="cities"
  [groupBy]="'metadata.continent'"
  [isAsync]="true"
  [isLoading]="loading">
</eui-autocomplete>
```

#### In reactive form with validation
```html
<eui-autocomplete
  [autocompleteData]="options"
  formControlName="selection"
  [isForceSelection]="true">
</eui-autocomplete>
```

```ts
fruits: EuiAutoCompleteItem[] = [
  { id: 1, label: 'Apple' },
  { id: 2, label: 'Banana' },
  { id: 3, label: 'Orange' }
];

onSelectionChange(items: EuiAutoCompleteItem[]): void {
  console.log('Selected:', items);
}
```

### Accessibility
- Uses ARIA live announcer to announce option navigation for screen readers
- Keyboard navigation: Arrow Up/Down to navigate options, Enter to select, Escape to close
- Tab key closes panel and optionally adds chip (with isAddOnBlur)
- Backspace removes last chip when input is empty (chipsPosition='inside')
- aria-required attribute automatically set when used with Validators.required
- Each option has role="option" for proper screen reader identification
- Panel positioning adjusts automatically to stay within viewport

### Notes
- Each EuiAutoCompleteItem must have unique `id` and `label` properties
- Use hasChips for multiple selection mode, omit for single selection
- chipsPosition options: 'top' (default), 'bottom', 'inside' (chips within input)
- matching options: 'contains' (default) or 'startWith' for filtering behavior
- Set isForceSelection to require selection from available options only
- isFreeValueAllowed (default true) allows custom values not in the list
- Virtual scrolling automatically handles large datasets efficiently
- groupBy accepts nested property paths (e.g., 'metadata.category.name')
- Use isAsync with dynamic data loading, update autocompleteData when ready
- Chips can be drag-and-dropped when isChipsDragAndDrop is enabled
- Panel width defaults to input width, override with panelWidth property


**Selector:** `eui-autocomplete, input[euiAutocomplete]`

## Inputs
- **autocompleteDataSelected**: `EuiAutoCompleteItem[]` - Sets the options that will be selected by default.
- **autocompleteData**: `undefined` - Datas to be used in the autocomplete.
- **chipsLabelTruncateCount**: `undefined` - Whether the chips label length is limited by the value of this option.
- **chipsPosition**: `"top" | "bottom" | "inside"` - 
- **chipsSortOrder**: `"ASC" | "DESC"` - Sets the sort criteria of the chips.
- **classList**: `string` - Sets a CSS class to be added on the options panel container.
- **groupBy**: `string` - Sets a grouping among the options.
- **hasChips**: `undefined` - Whether autocomplete will display the selected values with chips.
- **inputId**: `undefined` - Sets the id on the text input.
- **isAddOnBlur**: `undefined` - In combination with `hasChips`. Whether the chip is added when the text input is blurred.
- **isAsync**: `undefined` - Whether autocomplete will get the data asynchronously.
- **isChipsDragAndDrop**: `undefined` - Whether the chips can be drag and dropped.
- **isChipsRemovable**: `undefined` - Whether the chip can be removed from the selection. When a chip is removed, its value goes back in the panel.
- **isChipsSorted**: `undefined` - Whether this chip is sorted on their label.
- **isDuplicateValueAllowed**: `undefined` - Whether the chips can have multiple times the same value. With this option, the value is not removed from the panel when choosen.
- **isForceSelection**: `undefined` - In combination with `hasChips` and `isFreeValueAllowed=false`. Whether the text input is empty after blurring when no value has been selected in the panel.
- **isFreeValueAllowed**: `undefined` - In combination with `hasChips`. Whether the user can add a value, which is not part of the options, to craete a chip.
- **isGroupSorted**: `undefined` - Whether the grops of items are sorted on their label.
- **isItemsSorted**: `undefined` - Whether this item in the panel is sorted on their label.
- **isLoading**: `undefined` - Whether loading spinner is displayed in text input.
- **isMaxVisibleChipsOpened**: `undefined` - In combination with `maxVisibleChipsCount`. Whether all chips are shown by default.
- **isReadonly**: `undefined` - Whether autocomplete is in readonly mode.
- **itemsSortOrder**: `"ASC" | "DESC"` - In combination with `isChipsSorted`. Sets the sort criteria of the options in the panel.
- **matching**: `undefined` - Sets the way the options should be retrieved.
- **maxVisibleChipsCount**: `undefined` - Whether a limited amount, defined by this option, is used to display the chips.
- **panelWidth**: `string | number` - Sets the width of the options panel.
- **placeholder**: `string` - Sets the placeholder of the text input.
- **toggleLinkLessLabel**: `string` - In combination with `maxVisibleChipsCount`, sets the label of the 'less label' button, if not provided an arrow left icon will be displayed only.
- **toggleLinkMoreLabel**: `string` - In combination with `maxVisibleChipsCount`, sets the label of the 'more label' button, if not provided an arrow right icon will be displayed only.
- **visibleOptions**: `undefined` - Sets the maximum number of options that will be visible in the autocomplete panel.
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **chipDragRelease**: `EuiChipDragDrop` - Event emitted when a chip drag is released.
- **chipDragStart**: `EuiChipDragDrop` - Event emitted when a chip drag starts.
- **chipDrop**: `EuiChipDragDrop` - Event emitted when a chip is dropped.
- **clear**: `undefined` - Event emitted when the text input is cleared.
- **inputBlur**: `undefined` - Event emitted when the text input is blurred.
- **inputChange**: `string` - Event emitted when the value of the text input changes.
- **inputFocus**: `undefined` - Event emitted when the text input gets the focus.
- **itemAdd**: `EuiAutoCompleteItem` - Event emitted when an option is selected.
- **itemRemove**: `EuiAutoCompleteItem` - Event emitted when an option is removed.
- **panelClose**: `undefined` - Event emitted when the panel is closed.
- **panelOpen**: `undefined` - Event emitted when the panel is opened.
- **selectionChange**: `EuiAutoCompleteItem[]` - Event emitted when an option is selected or when the selection is modified.