Instantsearch.js: Changing indexName in real-time

[millansingh]

Hi there.

I was wondering if there was a way to change the index of an instantsearch object in real-time. I want to be able to have users switch between three indices when they click on the appropriate button in the UI. Ideally, I'd like to be able to change the indexName property, but that doesn't seem possible as-is. Are there any suggestions for how I might achieve this feature?

[Haroenv]

You can use the sortBySelector widget to change indices in a <select>, does that help you?

Feel free to reopen if it doesn't fit the usecase

[millansingh]

The indices in question do not have the same fields, and I do not want to use a select to switch but rather a couple buttons. I'm more than comfortable writing some JS to manually handle state, if there's a way to change the index without the sortBySelector widget. Do I need to write some kind of custom widget or connector?

[Haroenv]

I guess one option would be to have multiple instances for now. Cc @iam4x, do we need this for angular too?

[millansingh]

I would be down to destroy and re-initialize new searches, but I don't want to have three searches running at once. I couldn't find this in the docs, but is there any way to destroy an instantsearch instance gracefully, so that I can then re-initialize that search after?

[iam4x]

Hello @millansingh,

• For now you will have to run the three instances at once and write custom logic to handle the one displayed on your own.
• In the near future you will be able to dispose and re-initialize an instance (cf https://github.com/algolia/instantsearch.js/issues/2407#issuecomment-332852801) but I don't have any ETA for this feature release.

[millansingh]

So for the moment, I have a work-around where I hide the select and use the setIndex function of the sortBySelector widget to change between categories. This is not ideal, since the three indices are structured differently, but it will work for now.

[millansingh]

So this is somewhat related to this issue. I need to be able to grab what's been typed into a search box and then pipe that into a different index's search box and run the search. I can change search.helper.state.query, but it doesn't affect the DOM or run a new search. Is there a method I'm missing or some way I can manually initiate a search with a new query?

For context, I'm trying to put together multiple searches, but have only one visible at a time. When I switch index, I want to carry over the current typed value in the search bar to the index that I'm switching to's search bar.

[Haroenv]

This fiddle could help you with search on multiple instances at the same time: https://jsfiddle.net/j9nwpz34/

[millansingh]

I actually found a way to modify the search directly using helper.state.

This is what I have:
search.helper.state.index = index;
search.helper.search();

Which basically switches the index and re-runs the search. I can also go in and change other attributes and re-run the search as well (such as using different facet names for different indices). I don't know if this is intended behavior, however, so do you think this is a reliable implementation?

[Haroenv]

I think state is not supposed to mutated, it could cause some unexpected behaviour. I think it might be better to .getState(), .setState() and .search when necessary on the helper

[millansingh]

Okay I will look into that on Friday when I go back to work. Thanks!

[iam4x]

You can directly do:

helper
    .setIndex(INDEX_NAME)
    .search();

[millansingh]

Just found a ton of methods in the helper's prototype. I'm set with this. 👍