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:

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:


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.