atomic-search-box

The atomic-search-box component creates a search box with built-in support for suggestions.

Introduction

The Search Box component is the core of a search page, allowing the user to type and submit a query. There is built-in support for query suggestions in the Search Box component.

User Experience and Best Practices

Guidelines

It’s important to have it visible and clear to the user, best practices suggest that it should be in the top-center or top-right section.

Properties

Property Attribute Description Type Default

numberOfQueries

number-of-queries

The amount of queries displayed when the user interacts with the search box. By default, a mix of query suggestions and recent queries will be shown. You can configure those settings using the following components as children: - atomic-search-box-query-suggestions - atomic-search-box-recent-queries

number

8

redirectionUrl

redirection-url

Defining this option makes the search box standalone.

This option defines the default URL the user should be redirected to, when a query is submitted. If a query pipeline redirect is triggered, it will redirect to that URL instead (see query pipeline triggers).

string | undefined

suggestionTimeout

suggestion-timeout

The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won’t be shown.

number

400

Shadow Parts

Part Description

active-suggestion

The currently active suggestion.

clear-button

The button to clear the search box of input.

input

The search box input.

loading

The search box loading animation.

submit-button

The search box submit button.

suggestion

A suggested query correction.

suggestions

A list of suggested query corrections.

wrapper

The search box wrapper.

What's Next for Me?