InstantSearch.js 搜索框的多个实例

Question

I am trying to have multiple searchfields. This is what I am trying but it results in "cloned" input fields. Is this possible to have multiple search boxes which would work independent of each?

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,
        })
]);

Any help of alternative solutions on this would be highly appreciated.

Thanks!

Answer 1

same question was asked on this forum

By wrapping the entire webpage in one InstantSearch instance, it only permits one query - that is why your multiple searchboxes all reflect the same query

therefore a possible alternative would be to create another search instance
for example

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

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

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

and then create widgets like

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,
})
]);

make sure to start them separately as well

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

There is a codesandbox demo in the forum link posted above