多个InstantSearch.js searchBox实例

Question

我想要有多个搜索场。这是我正在尝试的，但它的结果是“克隆”输入字段。这有可能有多个搜索框可以独立工作吗？

search.addWidgets([ 
        instantsearch.widgets.searchBox({
            container: '#searchbox',
            placeholder: 'Regular Searchbox',
            autofocus: true,
            searchAsYouType: false,
            showReset: true,
            showSubmit: true
        }),

        instantsearch.widgets.searchBox({
            container: '#searchbox-2',
            placeholder: 'Searchbox to be integrated with AutoComplete',
            searchAsYouType: true,
        })
]);

如能在这方面提供任何替代解决办法，将不胜感激。

谢谢!

Answer 1

在这个论坛上也提出了同样的问题

通过将整个网页包装在一个InstantSearch实例中，它只允许一个查询--这就是为什么您的多个搜索框都反映相同的查询。

因此，一个可能的替代方法是创建另一个搜索实例。

例如

const searchClient = algoliasearch(
  'appId',
  'key'
);

const search = instantsearch({   //instance 1
  indexName: 'instant_search',
  searchClient,
});

const search2 = instantsearch({  //instance 2
  indexName: 'instant_search',
  searchClient,
});

然后创建小部件，如

search.addWidgets([ 
  instantsearch.widgets.searchBox({
      container: '#searchbox',
      placeholder: 'Regular Searchbox',
      autofocus: true,
      searchAsYouType: false,
      showReset: true,
      showSubmit: true
  }),

]);
search2.addWidgets([ 
  instantsearch.widgets.searchBox({
    container: '#searchbox-2',
    placeholder: 'Searchbox to be integrated with AutoComplete',
    searchAsYouType: true,
})
]);

确保它们也分开启动。

search.start();
search2.start();

在上面的论坛链接中有一个码箱演示