Autocomplete

The autocomplete is a text input enhanced by a panel of suggested options.

It uses the fds-search-input component, so it inherits all its properties.

Usage

Import

npm i @finastra/autocomplete

import '@finastra/autocomplete';
...
<fds-autocomplete name="World">
    <fds-list-item value="One">One</fds-list-item>
    <fds-list-item value="Two">Two</fds-list-item>
    <fds-list-item value="Three">Three</fds-list-item>
</fds-autocomplete>

API

Properties

| Property | Attribute | Type | Default | |-----------------------|-----------------------|-----------|---------| | ariaDescribedBy | aria-describedby | string | "" | | ariaLabel | aria-label | string | "" | | ariaLabelledBy | aria-labelledby | string | "" | | disabled | disabled | boolean | false | | icon | icon | string | "" | | loading | loading | boolean | false | | minLengthToOpenMenu | minLengthToOpenMenu | number | 0 | | name | name | string | "" | | placeholder | placeholder | string | "" | | required | required | boolean | false | | showClearButton | showClearButton | boolean | false | | useInnerFilter | useInnerFilter | boolean | true | | validationMessage | validationMessage | string | "" | | value | value | string | "" |

Methods

| Method | Type | |------------------|---------------| | blur | (): void | | focus | (): void | | reportValidity | (): boolean |

Events

| Event | Type | |---------|-----------------------| | blur | | | focus | | | input | CustomEvent<string> |