SiTypeaheadDirective documentation¶
selectorexported-as
[siTypeahead]si-typeaheadInput Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
siTypeahead ¶ | Typeahead | Set the options of the typeahead. Has to be either an Array or an Observable of an Array of options (string or object) | |
| typeaheadAutocompleteListLabel ¶ | TranslatableString | $localize`:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions` | Screen reader only label for the autocomplete list. |
| typeaheadAutoSelectIndex ¶ | number | 0 | Defines the index of the item which should automatically be selected. |
| typeaheadClearValueOnSelect ¶ | boolean | false | Defines whether the host value should be cleared when a value is selected. |
| typeaheadCloseOnEsc ¶ | boolean | true | Defines whether the typeahead can be closed using escape. |
| typeaheadFullWidth ¶ | boolean | false | If set, the typeahead will at minium have the width of the connected input field. |
| typeaheadItemTemplate ¶ | TemplateRef<TypeaheadOptionItemContext> | Defines an optional template to use as the typeahead match item instead of the one built in. Gets the TypeaheadOptionItemContext passed to it. | |
| typeaheadMatchAllTokens ¶ | ("no" | "once" | "separately" | "independently") | 'separately' | Defines whether and how to require to match with all the tokens if typeaheadTokenize is enabled. - no does not require all of the tokens to match. - once requires all of the parts to be found in the search. - separately requires all of the parts to be found in the search where there is not an overlapping different result. - independently requires all of the parts to be found in the search where there is not an overlapping or adjacent different result. ('independently' also slightly changes sorting behavior in the same way.) |
| typeaheadMinLength ¶ | number | 1 | Defines the number of characters the value of the host needs to be before a typeahead is displayed. Use 0 to have it display when focussing the host (clicking or tabbing into it). |
| typeaheadMultiSelect ¶ | boolean | false | Defines whether multiselection of typeahead is possible with checkboxes. |
| typeaheadOptionField ¶ | string | 'name' | Defines the name of the field/property the option string is in when the typeahead options are objects. |
| typeaheadOptionsInScrollableView ¶ | number | 10 | If typeaheadScrollable is true , defines the number of items visible at once. |
| typeaheadOptionsLimit ¶ | number | 20 | Defines the maximum number of items added into the DOM. Default is 20 and 0 means unlimited. |
| typeaheadProcess ¶ | boolean | true | Turns on/off the processing (searching and sorting) of the typeahead options. Is used when searching and sorting is done externally. |
| typeaheadScrollable ¶ | boolean | false | Makes the typeahead scrollable and sets its height. Uses typeaheadOptionsInScrollableView and typeaheadScrollableAdditionalHeight . |
| typeaheadScrollableAdditionalHeight ¶ | number | 13 | If typeaheadScrollable is true , defines the number of additional pixels to be added the the bottom of the typeahead to show users that it is scrollable. |
| typeaheadSkipSortingMatches ¶ | boolean | false | Skip the sorting of matches. If the value is true , the matches are sorted according to SiTypeaheadSorting . |
| typeaheadTokenize ¶ | boolean | true | Defines whether to tokenize the search or match the whole search. |
| typeaheadWaitMs ¶ | number | 0 | Defines the number of milliseconds to wait before displaying a typeahead after the host was focused or a value inputted. |
Output Properties¶
| Name | Type | Description |
|---|---|---|
| typeaheadOnFullMatch ¶ | TypeaheadMatch | Emits an Event when a typeahead full match exists. A full match occurs when the entered text is equal to one of the typeahead options. The event is a TypeaheadMatch |
| typeaheadOnInput ¶ | string | Emits an Event when the input field is changed. |
| typeaheadOnSelect ¶ | TypeaheadMatch | Emits an Event when a typeahead match is selected. The event is a TypeaheadMatch |
| typeaheadOpenChange ¶ | boolean | Emits whenever the typeahead overlay is opened or closed. |
typeaheadClosed ¶ | void | Deprecated: Use typeaheadOpenChange instead. |
| typeaheadOnMultiselectClose¶ | void | Deprecated: Never emits. Use typeaheadOpenChange instead. |
Attributes and Methods¶
| Name | Type | Default | Description |
|---|---|---|---|
| (readonly) typeaheadOpen ¶ | boolean | Indicates whether the typeahead is shown. |
Types Documentation¶
| Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality. |
|---|
| An interface to define the context of a typeahead item template | |||||
|---|---|---|---|---|---|
|
| A typeahead match, which is a processed typeahead option. |
|---|
| An array of TypeaheadOption . |
|---|
| An observable of a TypeaheadArray (array of TypeaheadOption ). |
|---|
Translatable import imported from @siemens/element-translate-ng |
|---|
| A singular item to be used in the typeahead. Can be either a string or an object. |
|---|
| A segment of a TypeaheadMatch , which is a matching or non-matching segment of a typeahead option. | |||||
|---|---|---|---|---|---|
|
| ||||||
| ||||||
| ||||||
|
| |||||||||||
| |||||||||||
| |||||||||||
|
| ||||||||
| ||||||||
| ||||||||
|
Except where otherwise noted, content on this site is licensed under MIT License.