Autocomplete component
<day-autocomplete> is a form control that provides the same functionality as a native input, enhanced with day Design styling and autocomplete capabilities.
Dependencies
'@dayerlin-bustamante/core''@dayerlin-bustamante/popover''@dayerlin-bustamante/input'
Selectors
Autocomplete: day-autocomplete
Installation and Usage
npm install @dayerlin-bustamante/autocompleteimport { DAYAutocompleteComponent } from '@dayerlin-bustamante/autocomplete';<day-autocomplete [data]="items" [placeholder]="'Search...'"/>Description
The autocomplete component is an input field that provides suggestions as the user types, improving the search and selection experience. Its functionality relies on the popover component to display the list of options.
The popover will open downwards by default, but it will adjust upwards if there is not enough space at the bottom of the screen. The popover's behavior will always be of type 'dropdown,' which means it will close when the user clicks outside of it.
The animation used to show and hide the list of options is of the 'dissolve' type, for a smooth transition. The overlay color is completely transparent so as not to interfere with the visibility of the page.
Inputs
| Name | Description | Default |
|---|---|---|
| data: any[] | The array of items to display in the dropdown. | [] |
| filterFn: fn | A required function to filter the data based on the search term. Should return a Promise of filtered items. | |
| minCharacters: number | Minimum number of characters required before triggering a search. | 3 |
| keyText: string | The property name used to display the item text. | |
| keyValue: string | The property name used as the items value. | |
| placeholder: string | Placeholder text for the input field. | |
| loading: boolean | Boolean indicating if the component is in a loading state. | false |
Directives
| Name | Description |
|---|---|
| DAYAutocompleteItemTmplDirective | Template directive to customize the autocomplete item. |
| DAYAutocompleteNoItemsTmplDirective | Template directive to customize the no items message. |
| DAYAutocompleteLoaderTmplDirective | Template directive to customize the loading state. |