将 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 到 select 一个位置或国家来过滤结果。或者，用户可以只使用 autocomplete.js 按 country/location.

筛选结果

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

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

Answer 1

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

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

我用上面解释的更改更新了你的Codepen。

将 Algolia Instantsearch.js 与 Autocomplete.js 同步

Sync Algolia Instantsearch.js with Autocomplete.js

javascript

autocomplete

algolia

instantsearch.js