Searchbar in navigation


I am facing an issue with Algolia instantsearch React components.

As I understood from the documentation, the Search functionality needs to be wrapped in a InstantSearch component, and within this wrapper, we have the SearchBox component, which basically takes user input and triggers a search.

However, inside my application, I need to use multiple instances of InstantSearch, for I have different pages like Categories, Product Search, New Arrivals…etc, and each page must have it’s own InstantSearch context, therefore I can not wrap the entire application in one instance.

In the navigation bar, there will be a search box which should trigger InstantSearch and display the products.

If I wrap the entire app, as to include the navigation bar and the rest of the body, then all pages will have a common, shared InstantSearch context, and all refinements, filters, queries will persist even if user has navigated away from the search page.

Basically, I would need to somehow externalize the SearchBox component, place it outside InstantSearch context and make it work as if it was within it.

How could I achieve this?

Hi Cristian,

If I’m understanding you, you maintain multiple indices but would like to use a single Searchbox to search across all of them?

We call this experience “federated search” and you can absolutely do it with Algolia. The trick is to scope the various filtering widgets under the individual indices.

Here’s a snippet of the pattern in vanilla JavaScript:

    .index({ indexName: 'instant_search_price_desc' })
        container: '#hits-instant-search-price-desc',
        templates: {
            '{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',

The pattern is similar for the various frameworks. For instance, in React you would wrap the widgets in am <Index> component. Here’s some further info to help you get started:

Hello Chuck,

Thank you for your response.

Unfortunately, I am not looking for federated search.

Let me give you a better example of what I am trying to achieve:

Assume that we have 2 pages

Each page, has it’s own InstantSearch instance…so every page would start like
<InstantSearch …

When the user goes over /categories, there is no search box, he will use the refinements and filters only.
Within the app header, there is a searchbox, which is not wrapped in InstantSearch, so we can assume it’s just an <input type=“search” element.

I want to make this input element to basically replace the SearchBox component, so it is mounted in the header, regardless of the page, but when user starts typing something, it will redirect you to /search page and trigger an algolia search.