Autocomplete on separate index with React InstantSearch

I’m trying to create an AutoComplete on a separate query-suggestions index with React InstantSearch. If I create the following App:


// Taken from the autocomplete documentation.
const Autocomplete = ({ hits }) => (
  <ul>
    {hits.map(index => (
      <li key={index.index}>
        <h2>{index.index}</h2>
        <ul>
          {index.hits.map(hit => (
            <li key={hit.objectID}>{hit.name}</li>
          ))}
        </ul>
      </li>
    ))}
  </ul>
);

const CustomAutocomplete = connectAutoComplete(Autocomplete);

const App = ({searchClient, defaultIndex, querySuggestionsIndex}) => {
  return (
    <InstantSearch indexName={defaultIndex}  searchClient={searchClient}>
      <SearchBox />
      <Index indexName={querySuggestionsIndex}>
        <CustomAutocomplete />
      </Index>
      <Hits />
    </InstantSearch>
  );
};

The hits listed by the autocomplete in the query suggestions index are empty.

If I replace <CustomAutocomplete /> with a <Hits /> object, it will display the hits properly from that index.

Can someone explain to me why this won’t work?

Thanks!

Hi @neal.milstein, I think you’re just missing connectHits.

import { connectHits } from 'react-instantsearch-dom';

const Autocomplete = connectHits(({ hits }) => ( ... ));

Here is the full example: Hits | React InstantSearch | API parameters | API Reference | Algolia Documentation

Hi Youcef, thanks for your response.

I’m not sure I follow you exactly: I need the refine method from the Autocomplete connector to refine the query when the user clicks a query suggestion. I’m ultimately trying to create a query suggestions component, not a hits component.

I’ve made a mistake in the above code however: query suggestions hits have the query attribute, not the name attribute.

However, I still cannot get this index to update when I type in the <SearchBox />. I’m trying to use two indices with one SearchBox: the first index is used for results, the second for query suggestions.

Below is a screenshot of my problem:

As you can see, I’ve typed “straw” into the SearchBox. The first index (results) properly displays results from this query. However, the second index (query suggestions) still has the empty query.

I hope that illustrates the problem. Here is the updated code for this test app: algolia-react-discourse/App.tsx at main · nrmilstein/algolia-react-discourse · GitHub

Oh I see what you meant to do.

Unfortunately this can’t work because any call to refine you’ll make from the autocomplete will only affect the parent index. So the key is actually have your query string stored as part of the internal state of your widget and have it synced to your searchbox.

We actually have a working example here you can pretty much copy paste.

Also some a tutorial that can walk you through it: Building Query Suggestions UI | Tutorials | Algolia Documentation

I hope this help!

1 Like

Ah ok, I saw that but assumed I could do it this way as well. Thanks!