动态更改搜索功能

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初始化函数，仅适用于第一个(主)索引。

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