Adding search bar to header
Stack Serverless
It’s a common pattern to have a search bar in the header of your website. Submitting a query in this search bar usually redirects user to a separate search results page.
To implement this with Search UI use the <SearchBar>
component and add onSubmit
prop that redirects user to the search page:
<SearchBox onSubmit={(searchTerm) => { window.location.href = `${PATH_TO_YOUR_SEARCH_PAGE}?q=${searchTerm}`; }} />
Once the redirect happens, Search UI will pick up the query from the URL and display the results.
Tip
View this implementation in our CodeSandbox example.
Related documentation: