Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Search

Search

A general purpose search component with optional result display

Most of this components inputs and outputs are fairly self explanatory. The one that might confuse some people is itemTemplates. This crucial input is how we tell the search component how to render our "rich" search results. In order to render out your search results, the search component simply takes the information attached to each SearchItem in your list of searchResults and plugs it in to one of the provided templates. Anything available in the SearchItem.context will be exposed to the template. See "let-user" above. This article does a pretty good job of explaining TemplateRefs and how to use them: https://alligator.io/angular/reusable-components-ngtemplateoutlet/ (However, you should be able to get by just fine simply basing any new work on these stories)

Contents

Default Background color Borderless Expandable Round corners With custom control With custom left icon With debounce time With scrollable search results Without result display

By default all search fields are rounded

If the search field acts more of an input and just so happens you need to search something first, prefer using square corners, which looks similar to other inputs.

Inputs
autoHighlightFirst ?: boolean = true

Automatically highlight the first search result when results change.

backgroundColor ?: InputBackgroundColor = 'default'
borderless ?: boolean = false

Not for general use. This is only for Messaging search. If you'd like to use this input, make sure you discuss with UI Eng

borderlessMobile ?: boolean = false

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng

clearButton ?: boolean = true
clearQueryOnSelect ?: boolean = false
control ?: FormControl<string>
debounceTimeMs ?: number

Debounces the emission of the search query after the specified number of milliseconds.

disabled ?: boolean = false
displayResults ?: boolean = true
displayResultsWithEmptyInput ?: boolean = false

Show options when the user has not entered anything

dynamicValidation ?: boolean = false
expandFromDirection ?: SearchExpandFromDirection = SearchExpandFromDirection.RIGHT

Determines the direction from which the search component expands.

expandableIconLight ?: boolean = false
iconMarginMobile ?: boolean = true

Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng.

increaseZIndex ?: boolean = false

Increase the result card z-index to callout level. Default: dropdown.

initialValue ?: string = ''
inputId ?: string

HTML id for the input element.

inputSearchSize ?: any = InputSize.MID
isExpandable ?: boolean = false
itemTemplates ?: { [type: string]: TemplateRef<any>; } = {}
itemTypeTitles ?: { [type: string]: string; } = {}
leftIcon ?: InputIconStart = 'ui-search'
leftIconSize ?: any = IconSize.MID
overlayMode ?: boolean = false

When true, renders the search inside a full-screen overlay with a blurred backdrop and top-third positioning.

placeholder ?: any = $localize`Search`
preventExpand ?: boolean = false

When true, clicking the expandable icon emits onFocus without expanding the inline search bar. Used to hand off to overlay search.

resultsBorderRadius ?: CardBorderRadius = 'mid'

Border radius of the results card.

resultsInFlow ?: boolean = false

Render results in normal flow instead of absolute overlay.

roundCorners ?: boolean = true
scrollableResultsMaxHeight ?: number

Max height of the scrollable results container in pixels.

scrollableSearchResults ?: boolean = false

Limits search results' container height and makes it scrollable.

searchResults ?: readonly SearchItem[] = []
shakeOnBlur ?: boolean = true
showEmptyResultsOnKeyboardNavigationOnly ?: boolean = false
showEscHint ?: boolean = false
showIcon ?: boolean = true
showKeyboardHints ?: boolean = false

Show keyboard shortcut hints at the bottom of the overlay. Only visible when overlayMode is active.

showNestedStories ?: boolean = false
showShortcutKey ?: boolean = false
useResultsCard ?: boolean = true

Keep existing results card container by default.

Outputs
clear ?: any = new EventEmitter<void>()
expandedChange ?: any = new EventEmitter<boolean>()

Exposes the expanded/collapsed status of the expandable search bar.

onFocus ?: any = new EventEmitter<void>()
overlayClose ?: any = new EventEmitter<void>()
query ?: any = new EventEmitter<string>()
select ?: any = new EventEmitter<SearchItem>()
submit ?: any = new EventEmitter<void>()