Multiple Inputs (autocomplete.js)

How to use autocomplete.js library (or instantsearch) for Algolia in such a way that when filling in the input “A”, the inputs “B” and “C” from the same index are filled.

For example: this works with Algolia Places

Hello there!

If I understand correctly, you want to target a single index with several search boxes, is that right?

While this is technically possible, you first need to think about what your strategy is for building a query from multiple queries. The Algolia API responds to a single query, so you need to pre-process those multiple inputs and turn them into one query that you feed to Algolia.

Once you have that in place, you can use one of our InstantSearch libraries to achieve the desired result. But instead of using three searchbox components (which wouldn’t work), you need to set up three regular text inputs and intercept their value as the end user types. You then need to combine those values into the final query, and feed this query to your InstantSearch application via a single renderless searchbox component.

Here’s a commented demo: https://codesandbox.io/s/nostalgic-wing-dhzc7

This should be a good base to get you started.

Best,