@terminus/ui-autocomplete
v2.0.0
Published
<h1>Autocomplete :rotating_light: DEPRECATED :rotating_light:</h1>
Downloads
12
Keywords
Readme
:rotating_light: NOTE: This component is deprecated. Please use the Selection List Component.
An autocomplete that allows single or multiple selections.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-autocompleteCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Basic usage with a FormControl
a) Pass an array of available options in. These are the options displayed to the user in the dropdown.
b) Create a local reference to the autocomplete component.
<ts-autocomplete
[showProgress]="inProgress"
>
<ts-option
[value]="state"
[option]="state"
*ngFor="let state of states | async"
>
{{ state.name }}
</ts-option>
</ts-autocomplete>c) Subscribe to the query events coming from the autocomplete. This is a stream of query strings
entered by the user. This stream is debounced and de-duped by default.
Duplicate selections
By default, duplicate selections are ignored. They can be allowed via a flag:
<ts-autocomplete
[formControl]="myCtrl"
[allowMultiple]="true"
[allowDuplicateSelections]="true"
>
...
</ts-autocomplete>Keep panel open after selection
By default, the panel will close after each selection. It can be forced to stay open via a flag.
NOTE: While the panel seems to stay open, it is actually closing and reopening immediately. That is why the
@Inputis namedreopenAfterSelection
<ts-autocomplete
[formControl]="myCtrl"
[allowMultiple]="true"
[reopenAfterSelection]="true"
>
...
</ts-autocomplete>Debouncing
By default, the autocomplete input query will be debounced 200ms. This time may be adjusted as needed:
<ts-autocomplete
[formControl]="myCtrl"
[debounceDelay]="400"
>
...
</ts-autocomplete>Minimum characters
By default, at least two characters must be typed before the query is fired. This limit may be adjusted:
<ts-autocomplete
[formControl]="myCtrl"
[minimumCharacters]="4"
>
...
</ts-autocomplete>Formatting options
<ts-autocomplete
[formControl]="myCtrl"
[displayFormatter]="formatDisplay"
[valueComparator]="compareValues"
>
...
</ts-autocomplete>Test helpers
Some helpers are exposed to assist with testing. These are imported from @terminus/ui-autocomplete/testing;
| Function |
|------------------------------------|
| getAllAutocompleteDebugElements |
| getAutocompleteInstance |
| getAutocompleteElement |
| getAutocompleteTriggerElement |
| getAllOptionInstances |
| getOptionInstance |
| getOptionElement |
| getAllOptgroups |
| getOptgroup |
| getOptgroupElement |
| getAutocompleteInput |
| getAllChipInstances |
| getChipInstance |
| getChipElement |