将Algolia Instantsearch.js与Autocomplete.js同步

Question

我已经设置了Instantsearch.js并创建了一个名为index ，如下所示：

{
  "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"
}

我还设置了autocomplete.js并创建了两个索引： location和country 。

这是location ：

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

这是country ：

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

我已经将这两个功能分开工作，但是我不知道如何同步它们。

我正在寻找的行为是用户可以在Instantsearch.js的帮助下输入搜索，并使用autocomplete.js选择位置或国家/地区来过滤结果。 或者，用户可以只使用autocomplete.js来按国家/地区过滤结果。

我创建了一个Codepen来显示我的代码。 谢谢。

我知道我使用的命名约定不是最好的约定，这些约定将被更改。

Answer 1

您需要确保在主索引中将cities和countries声明为attributesForFaceting 。 然后，你将需要添加的属性facets的初始searchParameters的instantsearch 。 该属性将包含您要使用的构面的名称（ cities和countries ）。 从现在开始，应该可以在属性上应用构面过滤器。

为了同步两个实例，您需要侦听autocomplete:selected事件。 您可能还需要侦听输入上的change事件，并在没有值时清除过滤器。 为了应用过滤器，您将需要使用helper ，这是instantsearch用于管理状态的内部库。

我使用上述更改更新了Codepen 。