[Autocomplete] Standard for Select options with different values

• I have searched the issues of this repository and believe that this is not a duplicate.

Many times, the values sent to the input are different from the label displayed on the option. Today, there are some props in the Autocomplete that brings the possibility to have a custom object like:

// For an object like {id: "test", text: "Test - ABC"} you can use:
getOptionLabel={(option) => option.text}
getOptionSelected={(option, value) => option.id === value.id}

But if Material UI can define a standard for receiving this values, much of the hard work done by the programmers can be fixed. A good proposal would be using an array of tuples:

<Autocomplete
   options={[["test", "Test ABC"], ["test2", "Test 2 - CDE"]]}
/>

Other solution could be using an object with a specific shape (Like Select2 standardize on https://select2.org/data-sources/ajax). Pretty achievable using PropTypes or TypeScript:

<Autocomplete
   options={[
    {
      "id": "1",
      "text": "Option 1"
    },
    {
      "id": "2",
      "text": "Option 2"
    }
  ]}
/>

Also, pagination of results could help the people that are still not used to search and scroll forever instead.

[DanailH]

If this one is still valid I can take it.

[oliviertassinari]

@rhuanbarreto Thanks for opening this issue. Yeah, I think that I could get behind supporting this change. It seems that the most common use case is to provide an object for the options, e.g. <option value="1">Blue</option>. So why not start from the same structure react-select’s users are already familiar with? This will help people move between the two components.

I propose:

interface option {
  label: string;
};