Skip to content

TypeaheadOptionSource documentation

(search: string) => Observable<TypeaheadArray>
Defines a source of options for the SiTypeaheadDirective . Use it for server-side pre-filtering.

This function will be called, whenever the search value is updated by the user.

A loading indicator is shown when this function was called until the Observable completes.

Types Documentation

TypeaheadOption[]
An array of TypeaheadOption .
A typeahead match, which is a processed typeahead option.
Properties
atBeginning: boolean
iconClass?: string
itemSelected?: boolean
matches: number
matchesAllParts: boolean
matchesAllPartsSeparately: boolean
matchesEntireQuery: boolean
option: TypeaheadOption
result: MatchSegment[]
stringMatch: boolean
text: string
uniqueMatches: number
uniqueSeparateMatches: number
(TypeaheadArray | TypeaheadObservable | TypeaheadOptionSource)
Either a TypeaheadObservable (observable of a TypeaheadArray ) or a TypeaheadArray .
(string & Translatable)
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
Properties
index: number
item: TypeaheadOption
match: TypeaheadMatch
query: string
(string | { [ key in (string | number) ]: any })
A singular item to be used in the typeahead. Can be either a string or an object.
Observable<TypeaheadArray>
An observable of a TypeaheadArray (array of TypeaheadOption ).
Translatable
import
A segment of a TypeaheadMatch , which is a matching or non-matching segment of a typeahead option.
Properties
isMatching: boolean
matches: number
text: string
uniqueMatches: number
implements OnChanges, OnDestroy
Constructor
() => {}
Properties
$typeahead: ReplaySubject<TypeaheadArray> = ...
Indicates that the typeahead can be potentially open. This signal is typically true when the input is focussed. It may be overridden and set to false when escape is pressed or when an option was selected.
canBeOpen: WritableSignal<boolean> = ...
componentRef?: ComponentRef<SiTypeaheadComponent>
elementRef: ElementRef<HTMLInputElement> = ...
foundMatches: Signal<(TypeaheadMatch[] | { atBeginning: boolean, iconClass: (string | undefined), itemSelected: any, matches: number, matchesAllParts: boolean, matchesAllPartsSeparately: boolean, matchesEntireQuery: boolean, option: TypeaheadOption, result: MatchSegment[], stringMatch: boolean, text: string, uniqueMatches: number, uniqueSeparateMatches: number }[] | { active: false, atBeginning: false, iconClass: (string | undefined), itemSelected: any, matches: 0, matchesAllParts: false, matchesAllPartsSeparately: false, matchesEntireQuery: false, option: { option: TypeaheadOption, text: string }, result: { isMatching: false, matches: 0, text: option.text, uniqueMatches: 0 }[], stringMatch: false, text: option.text, uniqueMatches: 0, uniqueSeparateMatches: 0 }[])> = ...
injector: Injector = ...
inputTimer: any
loadingSubscription?: Subscription
matchSorter: SiTypeaheadSorting = ...
overlay: Overlay = ...
overlayRef?: OverlayRef
processedSearch: Signal<(TypeaheadMatch[] | { atBeginning: boolean, iconClass: (string | undefined), itemSelected: any, matches: number, matchesAllParts: boolean, matchesAllPartsSeparately: boolean, matchesEntireQuery: boolean, option: TypeaheadOption, result: MatchSegment[], stringMatch: boolean, text: string, uniqueMatches: number, uniqueSeparateMatches: number }[])> = ...
query: WritableSignal<string> = ...
selectionCounter: WritableSignal<number> = ...
Set the options of the typeahead. Has to be either an Array or an Observable of an Array of options (string or object)
siTypeahead: InputSignal<Typeahead> = ...
sourceSubscription?: Subscription
Screen reader only label for the autocomplete list.
typeaheadAutocompleteListLabel: InputSignal<TranslatableString> = $localize`:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`
Defines the index of the item which should automatically be selected.
typeaheadAutoSelectIndex: InputSignalWithTransform<number, unknown> = 0
Defines whether the host value should be cleared when a value is selected.
typeaheadClearValueOnSelect: InputSignalWithTransform<boolean, unknown> = false
Defines whether the typeahead can be closed using escape.
typeaheadCloseOnEsc: InputSignalWithTransform<boolean, unknown> = true
This option will be shown at the end of the typeahead. Use it to allow users to create new options on the fly.

Use the {{ query }} parameter in translation values to include the current text from the input.
typeaheadCreateOption: InputSignal<(TranslatableString | undefined)> = ...
If set, the typeahead will at minium have the width of the connected input field.
typeaheadFullWidth: InputSignalWithTransform<boolean, unknown> = false
Defines an optional template to use as the typeahead match item instead of the one built in. Gets the TypeaheadOptionItemContext passed to it.
typeaheadItemTemplate: InputSignal<(TemplateRef<TypeaheadOptionItemContext> | undefined)> = ...
Indicates whether the typeahead is currently loading. When using TypeaheadOptionSource , this is controlled by the isLoading() method or automatically set to true while fetching options.
typeaheadLoading: WritableSignal<boolean> = false
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.)
typeaheadMatchAllTokens: InputSignal<("once" | "no" | "separately" | "independently")> = 'separately'
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).
typeaheadMinLength: InputSignal<number> = 1
Defines whether multiselection of typeahead is possible with checkboxes.
typeaheadMultiSelect: InputSignalWithTransform<boolean, unknown> = false
Emits when the create option is selected. It will emit the current search query.
typeaheadOnCreateOption: OutputEmitterRef<string> = ...
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
typeaheadOnFullMatch: OutputEmitterRef<TypeaheadMatch> = ...
Emits an Event when the input field is changed.
typeaheadOnInput: OutputEmitterRef<string> = ...
Emits an Event when a typeahead match is selected. The event is a TypeaheadMatch
typeaheadOnSelect: OutputEmitterRef<TypeaheadMatch> = ...
Emits whenever the typeahead overlay is opened or closed.
typeaheadOpenChange: OutputEmitterRef<boolean> = ...
Defines the name of the field/property the option string is in when the typeahead options are objects.
typeaheadOptionField: InputSignal<string> = 'name'
typeaheadOptions: Signal<{ option: TypeaheadOption, text: string }[]> = ...
If typeaheadScrollable is true , defines the number of items visible at once.
typeaheadOptionsInScrollableView: InputSignal<number> = 10
Defines the maximum number of items added into the DOM. Default is 20 and 0 means unlimited.
typeaheadOptionsLimit: InputSignal<number> = 20
Turns on/off the processing (searching and sorting) of the typeahead options. Is used when searching and sorting is done externally.
typeaheadProcess: InputSignalWithTransform<boolean, unknown> = true
Makes the typeahead scrollable and sets its height. Uses typeaheadOptionsInScrollableView and typeaheadScrollableAdditionalHeight .
typeaheadScrollable: InputSignalWithTransform<boolean, unknown> = false
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.
typeaheadScrollableAdditionalHeight: InputSignal<number> = 13
typeaheadSearch: Signal<Match<TypeaheadOption>[]> = ...
Skip the sorting of matches. If the value is true , the matches are sorted according to SiTypeaheadSorting .
typeaheadSkipSortingMatches: InputSignalWithTransform<boolean, unknown> = false
Defines whether to tokenize the search or match the whole search.
typeaheadTokenize: InputSignalWithTransform<boolean, unknown> = true
Defines the number of milliseconds to wait before displaying a typeahead after the host was focused or a value inputted.
typeaheadWaitMs: InputSignal<number> = 0
unprocessedSearch: Signal<{ active: false, atBeginning: false, iconClass: (string | undefined), itemSelected: any, matches: 0, matchesAllParts: false, matchesAllPartsSeparately: false, matchesEntireQuery: false, option: { option: TypeaheadOption, text: string }, result: { isMatching: false, matches: 0, text: option.text, uniqueMatches: 0 }[], stringMatch: false, text: option.text, uniqueMatches: 0, uniqueSeparateMatches: 0 }[]> = ...
overlayPositions: ConnectionPositionPair[] = ...
Accessors
Indicates whether the typeahead is shown.
get typeaheadOpen: boolean
Methods
clearTimer: () => void
createOption: () => void
(query: string) => string
Parameters
query: string
(option: TypeaheadOption, field: string) => (string | undefined)
Extracts a specific field value from a typeahead option.

This method is used to access additional properties of object-type options, such as 'selected' for multi-select functionality or 'iconClass' for displaying icons.

Returns The field value as a string if the option is an object and the field exists, otherwise undefined
Parameters
The typeahead option to extract the field from
option: TypeaheadOption
The name of the field to extract
field: string
(option: TypeaheadOption) => string
Extracts the display value from a typeahead option.

For string options, returns the string value directly. For object options, returns the value of the field specified by typeaheadOptionField (defaults to 'name'), or an empty string if the field doesn't exist.

Returns The string representation of the option for display purposes
Parameters
The typeahead option to extract the value from
option: TypeaheadOption
(source: TypeaheadOptionSource) => void
Handles TypeaheadOptionSource by subscribing to query changes and fetching options. Manages loading state automatically or uses custom isLoading() observable if provided.
Parameters
source: TypeaheadOptionSource
loadComponent: () => void
(changes: { [ propName: string ]: SimpleChange<any> } }) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: { [ propName: string ]: SimpleChange<any> } }
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
onBlur: () => void
(event: Event) => void
Parameters
event: Event
onKeydownEscape: () => void
removeComponent: () => void
(match: TypeaheadMatch) => void
Parameters
match: TypeaheadMatch

Except where otherwise noted, content on this site is licensed under MIT License.