Use a standalone search box

This is for:

Developer

A standalone search box is a search box that exists separately from its result list. As an example, take the search box at the top of this page. It allows you to start your search while on this page before redirecting you to the full search page.

To create a standalone search box in Atomic, use the redirectionUrl property of the atomic-search-box component.

<atomic-search-interface>
     <atomic-search-box redirection-url="https://www.coveo.com/en/search">
     </atomic-search-box>
</atomic-search-interface>

When the redirectionUrl option is defined and a search is executed, the search box automatically redirects to the target URL, unless you’ve defined a query pipeline redirect. If you’ve defined such a query pipeline redirect, it takes priority.

When an end user makes a search request from your standalone search box, Atomic stores the query and relevant usage analytics (UA) data in the local storage. When the end user reaches the full search page and it executes a first search, Atomic retrieves and uses the parameters and UA data stored in the local storage.

Alternate between search box types

In some cases, such as a single page application, you may want to use the same search box component to power both your full search page and your standalone search box. You can do so by dynamically setting the redirection-url.

document.querySelector('atomic-search-box').redirectionUrl = undefined;

The component will dynamically adapt to the new value, turning a regular search box into a standalone one, and vice versa.