If you're using AutoComplete in the header of your site, the most common implementation is to allow users to either select a query from your query suggestions or submit a query of their own.
You can create this experience by using AutoComplete's onSubmit function to open the dedicated search page when the user submits their own query. Then you can leverage the Query Suggestions plugin's transform source function to add a link to each query suggestion item. This will allow your users to select a query suggestion or enter their own query with both options linking to your dedicated search page.
In the CodeSandBox below you'll see an example AutoComplete that links from AutoComplete to a dedicated search page.
CodeSandbox: https://codesandbox.io/s/link-to-dedicated-search-page-dwp86v?file=/app.tsx
Here's another CodeSandbox showing how to preserve the queryId when linking to a dedicated search page. The queryId is a crucial part of sending events, so it's important to preserve the queryId when the users move from AutoComplete to your dedicated Search page. You can find more details on this topic in our "Keep track of query IDs" guide.
CodeSandbox: https://codesandbox.io/s/vigorous-breeze-qvdtjo?file=/app.js
Please find the documentation linked in this article below:
- https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-onsubmit
- https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions/createQuerySuggestionsPlugin/#param-transformsource
- https://www.algolia.com/doc/ui-libraries/autocomplete/guides/adding-suggested-searches/#customizing-query-suggestions
- https://www.algolia.com/doc/guides/sending-events/guides/queryid/