Info

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

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

isChipsPositionInside

getisChipsPositionInside()

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

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""