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!
