CODEWITHSUNDEEP
vue.jsalgoliainstantsearch.jsvue-instant-search
aseidma
aseidma

Reputation: 752

When querying multiple indices, how do I use different search parameters for each respective index in algolia? (Vue Instantsearch)

I am using Vue Instantsearch with multiple indices.

The query takes place in a ais-search-box component, looking through two indices simultaneously and displaying the results in an ais-autocomplete component.

This works well, however I can't find a way to assign each index a respective ais-configure component and therefore have to use the same filter for both indices. As you might imagine, with both indices containing different properties, this does not work as expected.

The docs mention this:

Since these are two dedicated indices, you can apply different parameters and widgets to the search. You can do it by passing different parameters to ais-configure, or mounting different widgets in each of the ais-index components. (source: https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/vue/)

It seems unclear how one would "pass different parameters to ais-configure"? Could anyone please provide an example?

Upvotes: 1

Views: 919

Answers (1)

Chuck Meyer
Chuck Meyer

Reputation: 381

There's a github repo with an example a little further down on that same page. here's a deep link to the code in question:

https://github.com/algolia/doc-code-samples/blob/master/Vue%20InstantSearch/multi-index-hits/src/App.vue

You can nest your ais-config for the second search under the ais-index component. Something like:

      <ais-instant-search
        :search-client="searchClient"
        index-name="instant_search_price_desc"
      >
        <ais-search-box v-model="query" />
        <ais-configure
          :restrictSearchableAttributes="['name']"
          :hitsPerPage="8"
        />
        <ais-hits>
          <template slot="item" slot-scope="{ item }">
            <h3><ais-highlight :hit="item" attribute="name" /></h3>
            <img :src="item.image" />
          </template>
        </ais-hits>
        <hr />
        <ais-index :search-client="searchClient" index-name="instant_search">
          <ais-configure
           :restrictSearchableAttributes="['name']"
           :hitsPerPage="2"
          />
         <ais-hits>
            ...

Upvotes: 3

Related Questions