Sync Algolia Instantsearch.js with Autocomplete.js

Question

I have set up instantsearch.js and created an index called index which looks like this:

{
  "cities": [
    "Boston"
  ],
  "company": "Pineapple",
  "countries": [
    "United States",
    "Canada"
  ],
  "description": "Best pineapple in the world",
  "highlight": true,
  "productTypes": [
    "Hard Drive"
  ],
  "category": "Hardware",
  "title": "Kiwi",
  "objectID": "5"
}

I have also set up autocomplete.js and created two indices: location and country .

This is location :

{
  "cities": "San Francisco",
  "objectID": "91961120"
}

This is country :

{
  "countries": "Germany",
  "objectID": "92132590"
}

I have gotten both functions to work separately, but I do not know how to sync them.

The behavior I'm looking for is that a user can input a search with the help of instantsearch.js and use autocomplete.js to select a location or country to filter down the results. Alternatively, the user can just use autocomplete.js to filter the results by country/location.

I've created a Codepen to show my code. Thanks.

I know the naming conventions I'm using are not the best, these will be changed.

Answer 1

You need to make sure that cities and countries are declared as attributesForFaceting in your main index. Then you will need to add the attribute facets on the initial searchParameters of instantsearch . This attribute will contain the name of the facets that you want to use ( cities & countries ). From now should be able to apply facet filters on your attributes.

In order to sync both instance you need to listen the autocomplete:selected event. You will also probably need to listen for the change event on the input and clear the filters when there is no value. For applying the filters you will need to use the helper , it's the internal library used by instantsearch for managing the state.

I updated your Codepen with the changes explain above.