connectAutoComplete with single indices? - React

Hi, sorry if this was already asked, but can you use the connectAutoComplete connector with only one indices?

I saw examples of the autocomplete connector being used for multi-indices for React, but what if I wanted to create a search bar that uses autocomplete/suggest using only one indices?

Thanks!

Hi @mmojica,

It’s totally doable, you can find an example on this codepen: https://codepen.io/mthuret/pen/VWbgxZ

Thank you so much marielaure!

Hi @marielaure.thuret , I apologize in advance but I have an additional question that I wanted to ask. With the example codepen you sent me (https://codepen.io/mthuret/pen/VWbgxZ) I was wondering why the connectAutocomplete executes multiple times when the page renders? I added a console.log() to the hits and noticed it gets executed 3 times, but couldn’t figure out the reason for that.

Thank you!

It’s rendered three times at initial render.

  1. Initial mount
  2. We udpate the store before perform the query so it triggers a re-render
  3. When we receive the results then we trigger a new re-render

Thanks @marielaure.thuret you have been a lot of help to me! I have one more follow-up question if you don’t mind that came up recently. In the example you displayed using autosuggest, I was wondering if there was a way where the input text does not clear when a user clicks outside the input field or when selecting a suggestion?

onSuggestionsClearRequested it is returning refine(' ') which clears the input text field. I tried to set it to find a way to work around this but was unsuccessful.  Any suggestions would be greatly appreciated :slight_smile: 

https://codepen.io/mthuret/pen/VWbgxZ

Thanks again! I know I been asking a lot of questions lately! :sweat_smile:

Hi @mmojica,

I believe that the behavior you’re looking for is this one: https://codepen.io/moroshko/pen/GEPoQW

I wrote this codepen to show you the interaction with React instantSearch => https://codepen.io/mthuret/pen/VWbgxZ?editors=1111

Is that what you want?

Thanks @marielaure.thuret your the best!

1 Like