React-autosuggest: Multiple Autocompletes on one page

[tgaff2x]

I'm trying to use multiple auto completes on one page; however, I'm not seeing a way to determine which field was updated.

Using your example codepen,
http://codepen.io/tgaff2x/pen/BWvaqw

At this point, I simply added a second Autocomplete object, gave them unique ids (doC, doD), and separate inputProps.

When I enter data in one of them, and console.log the event (within onChange), the unique id is not passed through and I don't see a way to determine which was updated (other than the unique placeholder, which seems silly).

I realize there's more to do, with regards to pulling in the right suggestions, etc - but I need to get past this point of finding the right id (or name) to determine which was updated.

I also realize, another approach would be to have separate onChange functions but I'm going to have quite a few autocompletes on the same page and was hoping to have a switch within the onChange rather than many onChanges.

Let me know if I'm missing something, or if there's a better way to solve this.
Thanks!

[moroshko]

Are you also going to have the same value passed to all Autosuggests, like in your example?

You can always add an id to the inputs (via inputProps), and then get the id of the input that changed using event.target.id. See example.

Does this help?

[tgaff2x]

No, I am looking to have different a value passed to each of the AutoSuggests.

Yes, I can see how I can set id with inputProps. Thank you for that.

If you could modify your example, such that each field is updated independently (ideally via one function that has a switch based on the id of the input field), then that should give me enough to proceed.

[tgaff2x]

I spent some more time looking at this, and I can figure out having different values.

But, here's what I'm stuck on. Using your example, within onChange the id is not always being passed in.

If you type 'C', and then with your mouse select Clojure, then erase it, type C and then select something else from the list. When I select with the up/down arrows it seems to be more consistent, whereas with the mouse it's intermittent.

It sometimes gives the react-autowhatever item, and sometimes it sends in a blank. See the 4th console item in the image.

[narayram]

I've a similar need as well (i.e. Multiple autocompletes on one page). So would appreciate any possible solutions.

[WinfredMa]

I have the same requirement. Could you give a detail multiple autocompletes sample? Thanks.

[moroshko]

Sorry, my bad. event.target is not always pointing to the input field.

I'd recommend creating a higher order component that wraps the Autosuggest.

Multiple Autosuggests example

[ahmetkuslular]

How can I extract the selected data and id in the form. @moroshko

[ghost]

Hallo i have a little problem.

I have two text fields that need to be autosuggests. Both require different values and have different data as a basis. I need both values later to execute further functions.

What's the best way to do that?

Thanks for your help

[PsyKoMari]

@dag17i0y Have you found a good way?

My only idea is to create X different onSuggestionsFetchRequested functions for my X different fields, because I cannot get id of the field that need to fetch data.

[brunnobb]

I do this all the time
I build a react component for the autosuggest and pass as props the needed suggestion array or fetch promise.
This way you cab have as many as you want sharing or not the origin values

[AnhNN09]

@moroshko
I have a problem when using that multiple:
I want to set the value for autosuggest when using the edit function? can you help me?
My page includes 2 autosuggest components