atomic-search-box
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 upper-right section.
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. For the specific case when you need to disable the search based on the length of the query, refer to {@link minimumQueryLength}. |
|
|
|
|
Whether to interpret advanced Coveo Cloud query syntax in the query. You should only enable query syntax in the search box if you have good reasons to do so, as it requires end users to be familiar with Coveo Cloud query syntax, otherwise they will likely be surprised by the search box behaviour. When the |
|
|
|
|
The minimum query length required to enable search.
For example, to disable the search for empty queries, set this to |
|
|
|
|
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. |
|
The wrapper that contains 2 suggestion lists. |
|
A list of suggested query corrections on the left panel. |
|
A list of suggested query corrections on the right panel. |
|
The wrapper that contains 1 suggestion list. |
|
The wrapper that contains suggestion panels. |
|
The search box wrapper. |
Very useful
Not really
Very useful
Not really