Show custom names for the autocompletion multi Indexes

Hi there,
I am in the process of implementing the autocompleted functionality of our website. I need to use multi indexes and the search results should be categorized with custom names for each index.

I follow the example in: https://github.com/algolia/doc-code-samples/tree/master/React%20InstantSearch/multi-index-autocomplete/src

Instead of displaying instant_search which is the name of the index, I need to show a custom message like “Smart phones” etc

  renderSectionTitle(section) {
     return section.index;
  }

I assume this is the place I need to change. But how to pass the custom name is the question which I am having now :grinning:

Thanks
Eshan

Hi Eshan,

You could maybe have a map between the name of the index and the name you want to display. For instance, if you have two indices named “phones” and “tablets”, you could define a map at the root level of the file:

const indexNameMap = {
  "phones": "Smart phones",
  "tablets": "Tablets"
}

  // ... then in the component
  renderSectionTitle(section) {
     return indexNameMap[section.index];
  }

Thanks @jonathan.montane
In my case, I am porting JQ based app in to react. in the JQ app, it has used a single index, and then it constructs three sections. Which means multiple sections using a single index, It looks like its not feasible with the react based approach.

Best
Eshan