atomic-search-box-instant-results

This is for:

Developer
In this article

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.

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'

display

display

The desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.

"grid" | "list" | "table"

'list'

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

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, for example, React, Angular or Vue.

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

Signature: setRenderFunction(render: ResultRenderingFunction) => Promise<void>

Returns: Promise<void>

Shadow Parts

Part Description

instant-results-show-all-button

outline