### File

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

### Description

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

### Implements

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent
selector | `eui-autocomplete, input[euiAutocomplete]`
imports | `NgTemplateOutlet` `AsyncPipe` `ReactiveFormsModule` `OverlayModule` `ScrollingModule` `A11yModule` `EuiAutocompleteOptionComponent` `EuiAutocompleteOptionGroupComponent` `EUI_INPUT_TEXT` `EUI_CHIP_LIST` `EUI_CHIP` `EUI_ICON`
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 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 writeValue
###### Inputs
autocompleteData autocompleteDataSelected chipsLabelTruncateCount chipsPosition chipsSortOrder classList dragAndDropConnectedTo dragAndDropSourceName 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

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

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

chipsLabelTruncateCount
Type : `any`
Default value : `null`
Whether the chips label length is limited by the value of this option.

chipsPosition
Type : `"top" | "bottom" | "inside"`
Default value : `'top'`
In Combination with `isItemsSorted`. Sets the position of the chips relative to the text input.

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.

dragAndDropConnectedTo
Type : `string[]`
Default value : `[]`
In combination with `isChipsDragAndDrop`, sets the name to the chips source with which a drag and drop will be done.

dragAndDropSourceName
Type : `string`
In combination with `isChipsDragAndDrop`, sets the name to the chips source.

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

hasChips
Type : `boolean`
Default value : `false`
Whether autocomplete will display the selected values with chips.

inputId
Type : `string`
Sets the id on the text input.

isAddOnBlur
Type : `boolean`
Default value : `false`
In combination with `hasChips`. Whether the chip is added when the text input is blurred.

isAsync
Type : `boolean`
Default value : `false`
Whether autocomplete will get the data asynchronously.

isChipsDragAndDrop
Type : `boolean`
Default value : `false`
Whether the chips can be drag and dropped.

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

isChipsSorted
Type : `boolean`
Default value : `false`
Whether this chip is sorted on their label.

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

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

isItemsSorted
Type : `boolean`
Default value : `false`
Whether this item in the panel is sorted on their label.

isLoading
Type : `boolean`
Default value : `false`
Whether loading spinner is displayed in text input.

isMaxVisibleChipsOpened
Type : `boolean`
Default value : `false`
In combination with `maxVisibleChipsCount`. Whether all chips are shown by default.

isReadonly
Type : `boolean`
Default value : `false`
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
Type : `"startWith" | "contains"`
Default value : `'contains'`
Sets the way the options should be retrieved.

maxVisibleChipsCount
Type : `any`
Default value : `null`
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
Type : `number`
Default value : `5`
Sets the maximum number of options that will be visible in the autocomplete panel.

### Outputs

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

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

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

clear
Type : `EventEmitter`
Event emitted when the text input is cleared.

inputBlur
Type : `EventEmitter`
Event emitted when the text input is blurred.

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

inputFocus
Type : `EventEmitter`
Event emitted when the text input gets the focus.

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

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

panelClose
Type : `EventEmitter`
Event emitted when the panel is closed.

panelOpen
Type : `EventEmitter`
Event emitted when the panel is opened.

selectionChange
Type : `EventEmitter`
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: EuiChipDragDrop)`
Called when a chip is released for reordering or from a source to another. Parameters :
Name | Type | Optional | Description
e | `EuiChipDragDrop` | No | Object containing the chip released.
Returns : `void`

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

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

Public onChipRemove
`onChipRemove(e: literal type)`
Called when a chip is removed. Parameters :
Name | Type | Optional | Description
e | `literal type` | No | Object containing the chip to remove.
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 writeValue
`writeValue(value: EuiAutoCompleteItem | EuiAutoCompleteItem[])`
Parameters :
Name | Type | Optional
value | `EuiAutoCompleteItem | EuiAutoCompleteItem[]` | No
Returns : `void`

### Properties

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

Public autocompleteOptGroupTemplate
Type : `TemplateRef<literal type>`

Public autocompleteOptions
Default value : `new BehaviorSubject<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
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
Default value : `false`

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