React-instantsearch with multiple indeces: Is it possible to refine a specific index?


I’m setting up an autocomplete component with React-instantsearch, pretty much like the example on GH. The searchbox has to indeces, one with results and one with search suggestions. When a suggestion from the latter index is selected, I want to refine the first index with that value. Is that possible? Targeting a specific index when refining?

Hi @kris,

The refine should target both indices, if that’s not the case could you provide a little example using this codesandebox template:


Sorry, maybe I didn’t explain what I’m trying to do properly. Right now both indeces are refined at the same time. What I would like to do is refine the index with suggestions when you type, and the index with results only when the form is submitted or a suggestion is selected. Is that possible without setting up two different instances of the component?

Unfortunately, I never tried to do something like that but I’m pretty sure that if you want to target one index and then another one, you’ll need two different InstantSearch components. If necessary you can share the search state of those components using onSearchStateChange and searchState props of InstantSearch.

Another approach would be to keep targeting both at the same time but only displaying some results depending if the form was submitted or not. Would that work for you?

Let us know how you’re experimentation goes @kris and don’t hesitate to share code snippets of it :slight_smile:

In case anyone is curious, I ended up doing this by using two separate <InstantSearch /> components and then passing the refine function from the outer one (the one with search results) down to the inner one, which is the search input with suggestions. That way the input can refine both indices as necessary.

Awesome @kris! Thanks for let us know!