Use Different Value for searching than is displayed with Material UI's Autocomplete-CodePudding

I am using Material UI's <AutoComplete /> component. It dictates the following structure for the options

const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];

How, what I want is a string used for the search, yet another string displayed as result. So something like

const options = [
  { label: 'The Godfather', toBeDisplayed: 1972 },
  { label: 'Pulp Fiction', toBeDisplayed: 1994 },
];

Here is Sandbox to play around (from the material ui documentation)

CodePudding user response：

I think this will solve your question. stringify: (option) => option.title you change option.title to option.what_key_you_want