Complex search forms with multiple indexes

Hi members.
I have a complex form that has different kinds of fields. And I have two indexes for my instant search.
Some fields are for the first index, and some for the second one.
And I did separate the hints to show the results of each index in a different area of my page.

I’ll do my best to explain the problem with an example (:
For example, I have an index named Movies, and another named Frames. Each movie contains many frames. I’m storing these objects into two indices in Algolia.

Here on my website, I have a form to search in both movies and frames.
But, when I update the value of a refinement that is related to frames, the results (hints) of movies get empty.
But I don’t want this behavior. I want only frames to get empty and still show movies. Because the refinement was related to frames only.

I thought having two indexes is pretty enough to achieve this. But it seems not.
I would be appreciated to help in this.


Hi @hrahimi270,

Yes, this should be doable with two indices. At the moment it does not work because the widget is applied to both indices. InstantSearch has an index widget that act as a container for children widgets. The widgets are scoped to the closest index i.e. a refinementList scoped to an index is only applied to this index, not the global one. Here is an example on CodeSandbox. The refinementList has an impact only on the second list of hits. This example uses InstantSearch.js but the same concept applies to React and Vue.

The alternative would be to use a single index. You could embed the different frames in the movies index rather than use a different index dedicated to frames. It depends on the use case. If both indices are meant to be searched independently it is probably better to stick to the two indices, but if they are used at the same time a single index could work.

Hope that helps!

1 Like