React-autosuggest: Separate input values

[nhippenmeyer]

I'm looking for a way to display one value in the input field (the value selected from the list of suggestions) whilst attaching a separate value (an id) to the value property of the input element, which would get submitted with the parent form. Is this possible and/or advisable and if so what's the correct way to acheive it?

[moroshko]

The need for id coming from the client may indicate a deeper issue in your application. For example, how will your app behave if user submits the form before JavaScript kicks in? From progressive enhancement point of view, I believe your server should be able to handle free text, not only text that is one of the suggestions. Could you explain the need for the id?

I can see cases when sending an id from the client would be an optimization, on top of the free text implementation. In this case, I'd probably create a hidden input field whose value will be the id, and set this value onSuggestionSelected (and probably clear it on inputProps.onChange).

[nhippenmeyer]

Thanks @moroshko, your suggestion makes perfect sense. Will move logic to the server to handle free text input and think about how to optimize on the client down the road.

[StokeMasterJack]

Could you explain the need for the id?

Here are a few reasons for allowing access to the id (as distinct from the display text):

1. Other parts of the app are already written expecting an id.
2. Writing code to go from "John Brown" to 437 is a pain in the butt when you already know the id.
3. select/comboboxes/autosuggest widgets have worked this way since the beginning of time. react-select works this way. MS Access from the 90's works this way. The html select element in react works this way. From React docs:

<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
</select>

<select multiple={true} value={'A'}>

Would it be that hard to implement?

By the way, otherwise, I like your component. Thanks.

[Carduelis]

Could you explain the need for the id?

Easy. We have a list of users. Autosuggest suggestion is a snipet of Avatar, First name, Second name and date of birth. There are two person with the same name: "John Smith". I want to pass into value his name (and his photo in container below), but send to server his id instead of string "John Smith 19.10.1948".

[nareshbhatia]

After a full day of playing with react-autosuggest, I feel that its primary use case is the ability to enter free form text with some suggestion capability. You can't think of it as an underlying value + display text combination (the select use case). At the end of the day, you can ignore all suggestions and type whatever you want into the input field.

I was able to fake the selection use case by displaying the display text, but when a suggestion is selected the underlying value gets stuffed into the input field. See my repo here. The use case is selecting a ticker by typing in either the ticker or the company name. Ticker is the underlying value and ticker + company name is the displayed text.