Setting up InstantSearch with multiple search boxes

I am new to Algolia and am trying to integrate it into a React App.There is a search bar in the site header which will appear on each page, as well as a search bar on the homepage and results page. Autocomplete will be integrated into only 2 of the 3 searchbars.

I gotInstantSearch to work on the results page, but now run into the issue of how to integrate the other search bars from the header and homepage. I tried wrapping the entire site in an InstantSearch component, but when I type a search term into one of the SearchBoxes the value will appear in all of the search boxes. What is the best way to integrate InstantSearch when you want to have multiple searchboxes that will all lead to the same results page.

Hi @cmc,

In general, InstantSearch is one searchbar that is used to display results on the same page as you type - this can either be via a dropdown or tiles showing products on the page. For example, see below:

From an initial review of your question, you may be trying to create the “dropdown for federated search”, then on click it goes to the product page. However, if this is not the case could you please clarify for us?

Thank you

Hi @ajay.david: Thanks for your response, to clarify, I am using React InstantSearch and I currently have a search page with a searchbox and everything works well. But I want to add a searchbox to the header of my website so people can search regardless if they are on the search page or not.

I have tried wrapping my entire site in an InstantSearch but when I type into one searchbox, the other search box shows the same value being typed into it. I think this goes back to your mention on it being meant for only one searchbox. What is the best way to implement the React InstantSearch if you want to have multiple search boxes?

Hi @cmc,

By wrapping the entire webpage in one InstantSearch instance, it only permits one query - that is why your multiple searchboxes all reflect the same query.

You can have multiple InstantSearch instances on the same page. In this case, create a new instance in your header or other page and have that directly search an index.

As an illustration, please see this sandbox to see how you can have more than one InstantSearch and searchbar at the same time - you can do the same with React InstantSearch

Hope this helps

@ajay.david: great thanks for the example, it looks like that is what I am looking for, is there currently a way to implement this with React InstantSearch if you are not using InstantSearch.js? Thanks for your help!

Hi @cmc yes the implementation steps should be the same, just with the React InstantSearch syntax instead.

Our React InstantSearch documentation is available here:

Here’s a basic (one search box) implementation with React.

You will just need to update to reflect the same approach that was sent by Ajay above (with multiple boxes.)