In order to use a single query to search multiple indices with different filters/facetFilters, we can use the Index widget to separately scope additional widgets (ie:hits
,refinementList
) that should be unique for each index while retaining common widgets for the UI (ie:searchBox
,pagination
).
Here is an InstantSearch React sandbox of such an implementation using two indices on our demo application. Using two separateindex
widgets, we are able to filter the mainIndex bybrand:amazon
and the subIndex bybrand:google
. while using thesearchBox
to query "black" on both indices:
We are also able to apply separaterefinementList
widgets to each index, if needed, as shown above.
Here is the pertinent code snippet:
search.addWidgets([
// Widgets scoped for both index's
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
instantsearch.widgets.pagination({
container: '#pagination',
}),
// Main Index Scoped Widgets
instantsearch.widgets.index({ indexName: 'instant_search' }).addWidgets([
instantsearch.widgets.configure({
hitsPerPage: 4,
facetFilters: 'brand:amazon',
}),
instantsearch.widgets.hits({
container: '#hits-instant-search',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
instantsearch.widgets.panel({
templates: { header: 'category' },
})(instantsearch.widgets.refinementList)({
container: '#main-refinement-list',
attribute: 'categories',
}),
]),
// Sub Index Scoped Widgets
instantsearch.widgets
.index({ indexName: 'instant_search_price_desc' })
.addWidgets([
instantsearch.widgets.configure({
hitsPerPage: 4,
facetFilters: 'brand:google',
}),
instantsearch.widgets.panel({
templates: { header: 'price range' },
})(instantsearch.widgets.refinementList)({
container: '#second-refinement-list',
attribute: 'price_range',
}),
instantsearch.widgets.hits({
container: '#hits-subIndex',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
]),
]);
search.start();
last reviewed Sep. 21, 2022