### File

`packages/components/eui-autocomplete/eui-autocomplete.component.ts`

### Description

`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

Example :

    <eui-autocomplete [autocompleteData]="fruits" placeholder="Select a fruit"></eui-autocomplete>

#### Multiple selection with chips

Example :

    <eui-autocomplete
      [autocompleteData]="countries"
      [hasChips]="true"
      [chipsPosition]="'top'"
      (selectionChange)="onSelectionChange($event)">
    </eui-autocomplete>

#### With grouping and async data

Example :

    <eui-autocomplete
      [autocompleteData]="cities"
      [groupBy]="'metadata.continent'"
      [isAsync]="true"
      [isLoading]="loading">
    </eui-autocomplete>

#### In reactive form with validation

Example :

    <eui-autocomplete
      [autocompleteData]="options"
      formControlName="selection"
      [isForceSelection]="true">
    </eui-autocomplete>

Example :

    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

### Implements

`OnInit` `OnDestroy` `ControlValueAccessor` `OnChanges` `AfterViewInit` `DoCheck`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiSecondary euiSuccess euiInfo euiWarning euiDanger
selector | `eui-autocomplete, input[euiAutocomplete]`
imports | `DragDropModule` `NgTemplateOutlet` `AsyncPipe` `ReactiveFormsModule` `OverlayModule` `ScrollingModule` `A11yModule` `EuiAutocompleteOptionComponent` `EuiAutocompleteOptionGroupComponent` `EUI_INPUT_TEXT` `EUI_CHIP_LIST` `EUI_CHIP` `EUI_ICON` `EUI_BUTTON` `EuiTruncatePipe` `EuiTooltipDirective`
templateUrl | `./eui-autocomplete.component.html`
styleUrl | `./eui-autocomplete.scss`

### Index

###### Properties
Public autocompleteControl Public autocompleteOptGroupTemplate Public autocompleteOptions Public autocompleteOptionTemplate Public chips Public distinctOptionGroups Public globalOptionIndex Public groupedOptions input inputContainerRef Public isDisabled Public Readonly isVisibleChipsOpened Public itemSize Public selectedOptionIndex templatePortalContent templates virtualScrolling
###### Methods
Public add Public closePanel Public onBlur Public onChipDragReleased Public onChipDragStarted Public onChipDropped Public onChipRemove Public onClear Public onFocus Public onOptionSelected Public openPanel Public optionsTrackByFn Public registerOnChange Public registerOnTouched Public setDisabledState Public toggleTags Public writeValue
###### Inputs
autocompleteDataSelected autocompleteData chipsLabelTruncateCount chipsPosition chipsSortOrder classList groupBy hasChips inputId isAddOnBlur isAsync isChipsDragAndDrop isChipsRemovable isChipsSorted isDuplicateValueAllowed isForceSelection isFreeValueAllowed isItemsSorted isLoading isMaxVisibleChipsOpened isReadonly itemsSortOrder matching maxVisibleChipsCount panelWidth placeholder toggleLinkLessLabel toggleLinkMoreLabel visibleOptions
###### Outputs
chipDragRelease chipDragStart chipDrop clear inputBlur inputChange inputFocus itemAdd itemRemove panelClose panelOpen selectionChange
###### HostBindings
class
###### Accessors
cssClasses isChipsPositionInside cdkVirtualScrollViewport isOpen hasOptionsResult

### Constructor

`constructor()`

### Inputs

autocompleteDataSelected
Type : `EuiAutoCompleteItem[]`
Default value : `[]`
Sets the options that will be selected by default.

autocompleteData
Default value : `[]`
Datas to be used in the autocomplete.

chipsLabelTruncateCount
Default value : `null, { transform: numberAttribute }`
Whether the chips label length is limited by the value of this option.

chipsPosition
Type : `"top" | "bottom" | "inside"`
Default value : `'top'`

chipsSortOrder
Type : `"ASC" | "DESC"`
Default value : `'ASC'`
Sets the sort criteria of the chips.

classList
Type : `string`
Default value : `null`
Sets a CSS class to be added on the options panel container.

groupBy
Type : `string`
Sets a grouping among the options.

hasChips
Default value : `false, { transform: booleanAttribute }`
Whether autocomplete will display the selected values with chips.

inputId
Sets the id on the text input.

isAddOnBlur
Default value : `false, { transform: booleanAttribute }`
In combination with `hasChips`. Whether the chip is added when the text input is blurred.

isAsync
Default value : `false, { transform: booleanAttribute }`
Whether autocomplete will get the data asynchronously.

isChipsDragAndDrop
Default value : `false, { transform: booleanAttribute }`
Whether the chips can be drag and dropped.

isChipsRemovable
Default value : `true, { transform: booleanAttribute }`
Whether the chip can be removed from the selection. When a chip is removed, its value goes back in the panel.

isChipsSorted
Default value : `false, { transform: booleanAttribute }`
Whether this chip is sorted on their label.

isDuplicateValueAllowed
Default value : `false, { transform: booleanAttribute }`
Whether the chips can have multiple times the same value. With this option, the value is not removed from the panel when choosen.

isForceSelection
Default value : `false, { transform: booleanAttribute }`
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
Default value : `true, { transform: booleanAttribute }`
In combination with `hasChips`. Whether the user can add a value, which is not part of the options, to craete a chip.

isItemsSorted
Default value : `false, { transform: booleanAttribute }`
Whether this item in the panel is sorted on their label.

isLoading
Default value : `false, { transform: booleanAttribute }`
Whether loading spinner is displayed in text input.

isMaxVisibleChipsOpened
Default value : `false, { transform: booleanAttribute }`
In combination with `maxVisibleChipsCount`. Whether all chips are shown by default.

isReadonly
Default value : `false, { transform: booleanAttribute }`
Whether autocomplete is in readonly mode.

itemsSortOrder
Type : `"ASC" | "DESC"`
Default value : `'ASC'`
In combination with `isChipsSorted`. Sets the sort criteria of the options in the panel.

matching
Default value : `'contains'`
Sets the way the options should be retrieved.

maxVisibleChipsCount
Default value : `null, { transform: numberAttribute }`
Whether a limited amount, defined by this option, is used to display the chips.

panelWidth
Type : `string | number`
Sets the width of the options panel.

placeholder
Type : `string`
Default value : `''`
Sets the placeholder of the text input.

toggleLinkLessLabel
Type : `string`
Default value : `null`
In combination with `maxVisibleChipsCount`, sets the label of the 'less label' button, if not provided an arrow left icon will be displayed only.

toggleLinkMoreLabel
Type : `string`
Default value : `null`
In combination with `maxVisibleChipsCount`, sets the label of the 'more label' button, if not provided an arrow right icon will be displayed only.

visibleOptions
Default value : `5, { transform: numberAttribute }`
Sets the maximum number of options that will be visible in the autocomplete panel.

### Outputs

chipDragRelease
Type : `EuiChipDragDrop`
Event emitted when a chip drag is released.

chipDragStart
Type : `EuiChipDragDrop`
Event emitted when a chip drag starts.

chipDrop
Type : `EuiChipDragDrop`
Event emitted when a chip is dropped.

clear
Event emitted when the text input is cleared.

inputBlur
Event emitted when the text input is blurred.

inputChange
Type : `string`
Event emitted when the value of the text input changes.

inputFocus
Event emitted when the text input gets the focus.

itemAdd
Type : `EuiAutoCompleteItem`
Event emitted when an option is selected.

itemRemove
Type : `EuiAutoCompleteItem`
Event emitted when an option is removed.

panelClose
Event emitted when the panel is closed.

panelOpen
Event emitted when the panel is opened.

selectionChange
Type : `EuiAutoCompleteItem[]`
Event emitted when an option is selected or when the selection is modified.

### HostBindings

class
Type : `string`

### Methods

Public add
`add(value: string)`
Method called when an option is added through the text input. Parameters :
Name | Type | Optional | Description
value | `string` | No | Value to add
Returns : `void`

Public closePanel
`closePanel()`
Closes the autocomplete panel. Returns : `void`

Public onBlur
`onBlur()`
Text input blur handler. Returns : `void`

Public onChipDragReleased
`onChipDragReleased(e: CdkDragRelease)`
Called when a chip is released for reordering or from a source to another. Parameters :
Name | Type | Optional | Description
e | `CdkDragRelease` | No | Object containing the chip released.
Returns : `void`

Public onChipDragStarted
`onChipDragStarted(e: CdkDragStart)`
Called when a chip is dragged for reordering or from a source to another. Parameters :
Name | Type | Optional | Description
e | `CdkDragStart` | No | Object containing the chip dragged.
Returns : `void`

Public onChipDropped
`onChipDropped(e: CdkDragDrop)`
Called when a chip is dropped for reordering or from a source to another. Parameters :
Name | Type | Optional | Description
e | `CdkDragDrop<any[]>` | No | Object containing the chip dropped.
Returns : `void`

Public onChipRemove
`onChipRemove(chip: EuiChip)`
Called when a chip is removed. Parameters :
Name | Type | Optional
chip | `EuiChip` | No
Returns : `void`

Public onClear
`onClear()`
Returns : `void`

Public onFocus
`onFocus()`
Text input focus handler. Returns : `void`

Public onOptionSelected
`onOptionSelected(e: EuiAutoCompleteItem)`
Method called when an option is selected. Parameters :
Name | Type | Optional | Description
e | `EuiAutoCompleteItem` | No | Selected option
Returns : `void`

Public openPanel
`openPanel()`
Method that creates and opens the panel containing autocomplete options. Returns : `void`

Public optionsTrackByFn
`optionsTrackByFn(index: number, item: EuiAutoCompleteItem)`
Parameters :
Name | Type | Optional
index | `number` | No
item | `EuiAutoCompleteItem` | No
Returns : `string | number`

Public registerOnChange
`registerOnChange(fn: () => void)`
Parameters :
Name | Type | Optional
fn | `function` | No
Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: () => void)`
Parameters :
Name | Type | Optional
fn | `function` | No
Returns : `void`

Public setDisabledState
`setDisabledState(isDisabled: boolean)`
Parameters :
Name | Type | Optional
isDisabled | `boolean` | No
Returns : `void`

Public toggleTags
`toggleTags()`
Returns : `void`

Public writeValue
`writeValue(value: EuiAutoCompleteItem | EuiAutoCompleteItem[])`
Parameters :
Name | Type | Optional
value | `EuiAutoCompleteItem | EuiAutoCompleteItem[]` | No
Returns : `void`

### Properties

Public autocompleteControl
Type : `unknown`
Default value : `new FormControl<string>('')`

Public autocompleteOptGroupTemplate
Type : `TemplateRef<literal type>`

Public autocompleteOptions
Type : `unknown`
Default value : `signal<EuiAutoCompleteItem[]>(this.autocompleteData())`

Public autocompleteOptionTemplate
Type : `TemplateRef<literal type>`

Public chips
Type : `EuiChip[]`
Default value : `[]`

Public distinctOptionGroups
Type : `string[]`

Public globalOptionIndex
Type : `number`
Default value : `0`

Public groupedOptions
Type : `unknown`
Default value : `new BehaviorSubject<{ [id: string]: { options: EuiAutoCompleteItem[], ancestorLength: number } }>({})`

input
Type : `ElementRef`
Decorators : `@ViewChild('input', {read: ElementRef})`

inputContainerRef
Type : `ElementRef`
Decorators : `@ViewChild('inputContainerRef')`

Public isDisabled
Type : `unknown`
Default value : `false`

Public Readonly isVisibleChipsOpened
Type : `Signal<boolean>`

Public itemSize
Type : `number`
Default value : `40`

Public selectedOptionIndex
Type : `number`
Default value : `0`

templatePortalContent
Type : `TemplateRef<ElementRef>`
Decorators : `@ViewChild('templatePortalContent')`

templates
Type : `QueryList<EuiTemplateDirective>`
Decorators : `@ContentChildren(EuiTemplateDirective)`

virtualScrolling
Type : `CdkVirtualScrollViewport`
Decorators : `@ViewChild('virtualScrolling')`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

isChipsPositionInside
get `isChipsPositionInside()`

cdkVirtualScrollViewport
get `cdkVirtualScrollViewport()`
Calculates the height that the virtual scroll need to have. Returns : `number`

isOpen
get `isOpen()`
Returns the opening state of the panel. Returns : `boolean`

hasOptionsResult
get `hasOptionsResult()`
Checks if autocomplete options are available. Returns : `boolean`

# results matching ""

# No results matching ""