🚨 NOTE: This component is deprecated. Please use the Selection List Component.
An autocomplete that allows single or multiple selections.
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-autocompleteIn your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';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">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.
By default, duplicate selections are ignored. They can be allowed via a flag:
<ts-autocomplete
[formControl]="myCtrl"
[allowMultiple]="true"
[allowDuplicateSelections]="true"
>
...
</ts-autocomplete>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>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>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><ts-autocomplete
[formControl]="myCtrl"
[displayFormatter]="formatDisplay"
[valueComparator]="compareValues"
>
...
</ts-autocomplete>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 |