How to display search results out of search bar(as opposed to a separate search/results page)

Hello, please excuse me if this question has already been asked. I have been unable to find it in the forums:

I am a beginner using React-InstantSearch and I am trying to understand how to display search results directly attached to the search bar, as opposed to a separate page for search results. An example of this implementation is the search bar on https://www.producthunt.com/ or https://medium.com/.

Thank you for your help.

Hello @gvakka,

What you can do is to create a “custom” component for your Searchbar using the connectors API:

In this custom component, when an user focus the searchbar and there are results, you can display a normal Hits component in your custom searchbox component.

Does that is clear enough for you? Feel free to answer me back here in this topic.

Thanks! Cheers :slight_smile:

As a suggestion from @marielaure.thuret you can also use the connectAutocomplete which provides you everything at once (the hits and refine() function to trigger a search): https://community.algolia.com/react-instantsearch/connectors/connectAutoComplete.html

It should pretty straightforward to build something using an autocomplete/suggest react component like:

Cheers :slight_smile: