Changing searchBox and updating results?

Hi there,

I have two instantSearch instances on the same page, both use seperate indexes, hit containers etc however i’d like to do one of the following:

  1. allow both instances to “share” the same searchBox component so typing in one will trigger a search on both instances

  2. have separate searchBox components and manually update when either change (firing off the appropriate search), essentially keeping them in sync.

Are either of these approaches possible or is there a better way to achieve this? I’m using the standard instantsearch.js library rather than react

Thanks!

1 Like

hi @ianp, here’s a jsFiddle that might help you in doing so: https://jsfiddle.net/j9nwpz34/

Let me know how it goes.

1 Like

Ah great - works well!

Just incase someone else stumbles across this and trying to do the same with a places widget (i.e placesInstantsearchWidget.js) you can also do:

indexTwo.helper.setQueryParameter('aroundLatLng',indexOne.helper.state.aroundLatLng);
indexTwo.helper.search();
2 Likes

Can you provide a demo version of using instantsearch with placesInstantsearchWidget.js?

Maybe @raphael.daguenet could help there?

Hi @lisa

checkout this example using instantsearch with placesInstantsearchWidget.js: https://jsfiddle.net/zhywt33f/

Let me know if that works for you!

1 Like

Thanks, Raphael. I’m combined my data and places search. Can you please help me with inject input data to the search?

For example, I have distance field: 5m, 10, 20m and user will select one of them and the search will be updated on the instancesearch

@lisa Could you explain, in a new post, your full usecase along with:

  • what you want to display in your search UI
  • how every element react to user event and how the search is impacted

That would help us a lot giving you clearer instructions. Thanks.

@vvo I’m using instantsearch for my search data and I want to implement search by geolocation, for example, user will input their city/zipcode and distance(diameter) 10, 20, 50miles then the search will pull the data.

However, I don’t know how to feed the user input date into instantsearch helper function whenever they change the search criteria.

Please see my form as below

50 PM

Here’s a jsFiddle with a distance select element, hope it will help you figure it out for your own usage: https://jsfiddle.net/wkjyev3p/10/

Do select a city then use the distance

1 Like