动态改变 searchFunction

Question

上下文：我正在尝试将多个索引绑定到一个搜索框

我有一个索引数组，我想编辑第一个索引的searchFunction。

const indexes = indexNames.map( name => return createAlgoliaIndex(name) )
const main = indexes[0]

main.searchFunction = (helper) => {
  indexes.forEach( (algoliaIndex, index) => {
    if (index === 0)
      return;

    algoliaIndex.helper.setQuery(helper.state.query).search()
  })

  helper.search()
}

createAlgoliaIndexFor(name) {
  return instantsearch({
    indexName: name,
    searchClient
  })
}

基本上它不起作用:(

有什么想法吗？

Answer 1

您显然别无选择：searchFunction 选项必须在初始化时传递。

这是一个工作示例（抱歉代码有点乱）：

const searchClient = algoliasearch('1KCCSVLJHD', '0fb99058412c4776c60725c0fe9b2d7d');

const indexes = ["test", "test2"].map((name, idx) => {
  const searchFunction = idx !== 0 ? null : (helper) => {
    indexes.forEach((algoliaIndex, index) => {
      if (index === 0) {
        return;
      }

      algoliaIndex.helper.setQuery(helper.state.query).search()
    });

    helper.search();
  };

  return instantsearch({
    indexName: name,
    searchFunction,
    searchClient
  })
});


indexes[0].addWidget(instantsearch.widgets.searchBox({
  container: '.search-box'
}));
indexes[0].addWidget(instantsearch.widgets.hits({
  container: '.hits-1'
}));
indexes[1].addWidget(instantsearch.widgets.hits({
  container: '.hits-2'
}));


for (var i = indexes.length - 1; i >= 0; i--) {
  indexes[i].start();
}

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.32.1/dist/algoliasearchLite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.2.0"></script>
<div class="search-box"></div>

<h1>First index</h1>
<div class="hits-1"></div>

<h1>Second index</h1>
<div class="hits-2"></div>

这基本上就是你正在做的，但是searchFunction 直接传递给instantsearch 初始化函数，仅用于第一个（主）索引。

请注意，由于在 Instantsearch 实例上调用 start 将立即调用 search 并因此调用 searchFunction，因此您必须最后启动主实例，以便在其他实例上存在 helper。