File

packages/eui/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

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

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

results matching ""

    No results matching ""