packages/eui/packages/components/eui-autocomplete/eui-autocomplete.component.ts
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.
OnInit
OnDestroy
ControlValueAccessor
OnChanges
AfterViewInit
DoCheck
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 |
constructor()
|
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 |
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 |
dragAndDropSourceName |
Type : string
|
In combination with |
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 |
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 |
isFreeValueAllowed |
Type : boolean
|
Default value : true
|
In combination with |
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 |
isReadonly |
Type : boolean
|
Default value : false
|
Whether autocomplete is in readonly mode. |
itemsSortOrder |
Type : "ASC" | "DESC"
|
Default value : 'ASC'
|
In combination with |
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 |
toggleLinkMoreLabel |
Type : string
|
Default value : null
|
In combination with |
visibleOptions |
Type : number
|
Default value : 5
|
Sets the maximum number of options that will be visible in the autocomplete panel. |
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. |
class |
Type : string
|
Public add | ||||||||
add(value: string)
|
||||||||
Method called when an option is added through the text input.
Parameters :
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 :
Returns :
void
|
Public onChipDragStarted | ||||||||
onChipDragStarted(e: EuiChipDragDrop)
|
||||||||
Called when a chip is dragged for reordering or from a source to another.
Parameters :
Returns :
void
|
Public onChipDropped | ||||||||
onChipDropped(e: EuiChipDragDrop)
|
||||||||
Called when a chip is dropped for reordering or from a source to another.
Parameters :
Returns :
void
|
Public onChipRemove | ||||||||
onChipRemove(e: literal type)
|
||||||||
Called when a chip is removed.
Parameters :
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 :
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 :
Returns :
string | number
|
Public registerOnChange | ||||||
registerOnChange(fn: () => void)
|
||||||
Parameters :
Returns :
void
|
Public registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
Parameters :
Returns :
void
|
Public setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
Parameters :
Returns :
void
|
Public writeValue | ||||||
writeValue(value: EuiAutoCompleteItem | EuiAutoCompleteItem[])
|
||||||
Parameters :
Returns :
void
|
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')
|
cssClasses |
getcssClasses()
|
Computes and returns the CSS classes for the component based on its current state.
Returns :
string
|
cdkVirtualScrollViewport |
getcdkVirtualScrollViewport()
|
Calculates the height that the virtual scroll need to have.
Returns :
number
|
isOpen |
getisOpen()
|
Returns the opening state of the panel.
Returns :
boolean
|
hasOptionsResult |
gethasOptionsResult()
|
Checks if autocomplete options are available.
Returns :
boolean
|