Search with suggestions and separate results page

Open Q&A
#1

I am new to Algolia. I am building a search feature for a client with Algolia. The site is build with Gatsby/React and hosted on Netlify.

A search box needs to be on every page. When a user types in the search term I need to show a list of suggestions.

When the user clicks on any suggestion or hits the enter key I need to go to a separate search page that is showing all results for the search. Search results need to be shown in chunks with a show more button. I also need to show categories so the user can narrow the results.

I have build a simple search with the gatsby-algolia-plugin following a tutorial on the gatsby website. The tutorial uses instant search and shows search results under the searchbox. It is not clear to me how to get to what I described earlier.

Can anybody give me any pointers as to how to approach this?

#2

you can use connectAutoComplete in InstantSearch for the dropdown, and a separate InstantSearch instance on the search page that reads the query from the URL

read more:

#3

Thank you Haroen. I’ll do more reading. Are you aware of any code samples, examples I could look at?

#4

there’s an example with both autocomplete and a full page here, you will just need to ignore the actual hits component: autocomplete-results-page - CodeSandbox

On the routing page there’s a couple examples linked: Routing URLs | Building Search UI | Guide | Algolia Documentation

#5

Thanks again for your guidance. This helps a LOT :wink:

1 Like