將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 。