How can I use separate filters on multi-index search?

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 sandbox of such an implementation using two indices on our demo application. Using two separate index widgets, we are able to filter the mainIndex by brand:amazon and the subIndex bybrand:google. while using the searchBox to query "black" on both indices:



We are also able to apply separate refinementList 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();