atomic-search-box-instant-results

This is for:

Developer

The atomic-search-box-instant-results component can be added as a child of an atomic-search-box component, allowing for the configuration of instant results behavior.

This component does not support accessibility out-of-the-box. To do so, see Instant Results Accessibility.

This component is not supported on mobile.

Properties

Property Attribute Description Type Default

ariaLabelGenerator

The callback to generate an aria-label for a given result so that accessibility tools can fully describe what’s visually rendered by a result.

By default, or if an empty string is returned, result.title is used.

((bindings: Bindings, result: Result) => string | undefined) | undefined

density

density

The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.

"comfortable" | "compact" | "normal"

'normal'

imageSize

image-size

The expected size of the image displayed in the results.

"icon" | "large" | "none" | "small"

'icon'

maxResultsPerQuery

max-results-per-query

The maximum number of results to show.

number

4

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

default

The default slot where the instant results are rendered.

Methods

setRenderFunction

Sets a rendering function to bypass the standard HTML template mechanism for rendering results. You can use this function while working with web frameworks that don’t use plain HTML syntax, e.g., React, Angular or Vue.

Do not use this method if you integrate Atomic in a plain HTML deployment.

Signature: setRenderFunction(resultRenderingFunction: ItemRenderingFunction) => Promise<void>

Returns: Promise<void>

Shadow Parts

Part Description

outline