atomic-search-box (Deprecated)
atomic-search-box (Deprecated)
|
Atomic v1 has been deprecated. We recommend using the latest version of the Coveo Atomic library. |
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
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
|
|
Whether to clear all active query filters when the end user submits a new query from the search box. Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no results. |
|
|
|
|
Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty. |
|
|
|
|
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 |
|
|
|
|
Defining this option makes the search box standalone (see Use a standalone search box(https://docs.coveo.com/en/atomic/latest/usage/ssb/). 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). |
|
|
|
|
The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won’t be shown. |
|
|
Shadow parts
| Part | Description |
|---|---|
|
The currently active suggestion. |
|
The button to clear the search box of input. |
|
The clear button’s icon. |
|
The search box input. |
|
An instant result rendered by an |
|
The clickable suggestion to show all items for the current instant results search rendered by an |
|
The button inside the clickable suggestion from the |
|
The search box loading animation. |
|
The contents of a suggestion from the |
|
The icon of a suggestion from the |
|
A suggestion from the |
|
The text of a suggestion from the |
|
The "clear" text of the clear button above suggestions from the |
|
The contents of a suggestion from the |
|
The icon of a suggestion from the |
|
A suggestion from the |
|
The text of a suggestion from the |
|
The highlighted portion of the text of a suggestion from the |
|
The "recent searches" text of the clear button above suggestions from the |
|
The contents of the clear button above suggestions from the |
|
The clear button above suggestions from the |
|
The search box submit button. |
|
The search box submit button’s icon. |
|
A suggested query correction. |
|
An item in the list that separates groups of suggestions. |
|
An item in the list that will update the search box query. |
|
A list of suggested query corrections on each panel. |
|
A list of suggested query corrections on the left panel. |
|
A list of suggested query corrections on the right panel. |
|
The wrapper that contains suggestions panels. |
|
The search box wrapper. |
Very useful
Not really