React Multi-Index Search With Tabbed Dropdown For Hits

I am currently using instantsearch and reactstrap. I’m trying to create a an autocomplete component that searches multiple indexes, and upon clicking the search bar shows a dropdown with a separate tab for each index’s hits.

Has anyone created something like this or are there any examples to go off of? I tried using autosuggest but their documentation for results is terrible, and I have huge conflicts with reactstrap and styling.

Hi @ilyafish

We have an example:

It creates a custom Autocomplete component using connectAutocomplete and … well, react-autosuggest :slight_smile:

If you’d like to have a full control over the rendering, you might want to check out which is a renderless autocomplete react library.

And we’ve been actively working on a new autocomplete library. It’s in alpha but quite stable and we’re adding a lot of good features.

Let us know if you want to try it, or if you have any question!
We’re looking forward to hearing from you :slight_smile:

Thank you! Yeah I spent hours trying to make the example with react-autosuggest fit my needs, unfortunately it doesn’t play well with theme components and requires manually writing the CSS…I would like to avoid that because that means a components styling has to be updated in two places, at the theme level and inside autosuggest.

I’ll check out downshift, would love to try to new autocomplete library though and keep everything “in-house” with Algolia.

For the record I almost was able to get everything done with Algolia using connectHits and connectSearchBox, ran into a wall where when I click between tabs it erases the input - probably an easy fix that has to do with state - here is a video:

The only reason I mentioned autosuggest is I read it extends functionality by allowing things like downkey selection

Hey there! As @eunjae.lee said, our new autocomplete.js v1 alpha can definitely help you build what you want.

If you’re still willing to try with React InstantSearch and connectHits and connectSearchBox, could you please provide a reproducible CodeSandbox example so that we can help you debug this? You can use this starter sandbox if you want.

Hi Sarah!

I’ve been testing the autocomplete alpha and got it working with the Typescript/React version at

But when I try to use the ES6 & JSX code in the documentation (, I keep getting an error saying that getPanelProps is not a function. Is there a fix for that? Because I would much rather not use Typescript.


Hi @brent.miller,

It looks like the API changed a bit recently with some naming changes. The getPanelProps used to be called getDropdownProps. Here is the PR that rename it: GitHub. Those changes have been released with the version 1.0.0-alpha.35. You should at least have this version to reproduce the example.

Hope that helps!