# EuiAutocompleteComponent

**Type:** component



`eui-autocomplete` is a text input showing some suggestions when the user types letters. It can be enhanced with chips to allow user to select multiple values.



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

## Inputs
- **autocompleteData**: `EuiAutoCompleteItem[]` - Datas to be used in the autocomplete.
- **autocompleteDataSelected**: `EuiAutoCompleteItem[]` - Sets the options that will be selected by default.
- **chipsLabelTruncateCount**: `any` - Whether the chips label length is limited by the value of this option.
- **chipsPosition**: `"top" | "bottom" | "inside"` - In Combination with `isItemsSorted`. Sets the position of the chips relative to the text input.
- **chipsSortOrder**: `"ASC" | "DESC"` - Sets the sort criteria of the chips.
- **classList**: `string` - Sets a CSS class to be added on the options panel container.
- **dragAndDropConnectedTo**: `string[]` - In combination with `isChipsDragAndDrop`, sets the name to the chips source with which a drag and drop will be done.
- **dragAndDropSourceName**: `string` - In combination with `isChipsDragAndDrop`, sets the name to the chips source.
- **groupBy**: `string` - Sets a grouping among the options.
- **hasChips**: `boolean` - Whether autocomplete will display the selected values with chips.
- **inputId**: `string` - Sets the id on the text input.
- **isAddOnBlur**: `boolean` - In combination with `hasChips`. Whether the chip is added when the text input is blurred.
- **isAsync**: `boolean` - Whether autocomplete will get the data asynchronously.
- **isChipsDragAndDrop**: `boolean` - Whether the chips can be drag and dropped.
- **isChipsRemovable**: `boolean` - Whether the chip can be removed from the selection. When a chip is removed, its value goes back in the panel.
- **isChipsSorted**: `boolean` - Whether this chip is sorted on their label.
- **isDuplicateValueAllowed**: `boolean` - Whether the chips can have multiple times the same value. With this option, the value is not removed from the panel when choosen.
- **isForceSelection**: `boolean` - 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**: `boolean` - In combination with `hasChips`. Whether the user can add a value, which is not part of the options, to craete a chip.
- **isItemsSorted**: `boolean` - Whether this item in the panel is sorted on their label.
- **isLoading**: `boolean` - Whether loading spinner is displayed in text input.
- **isMaxVisibleChipsOpened**: `boolean` - In combination with `maxVisibleChipsCount`. Whether all chips are shown by default.
- **isReadonly**: `boolean` - Whether autocomplete is in readonly mode.
- **itemsSortOrder**: `"ASC" | "DESC"` - In combination with `isChipsSorted`. Sets the sort criteria of the options in the panel.
- **matching**: `"startWith" | "contains"` - Sets the way the options should be retrieved.
- **maxVisibleChipsCount**: `any` - 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**: `number` - 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]]
- **euiAccent**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

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