InstantSearch.js 搜索框的多个实例

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();

上面发布的论坛链接中有一个代码框演示