如何在material-ui中进行分组自动完成答案

【问题标题】：How to make a grouped autocomplete in material-ui如何在material-ui中进行分组自动完成
【发布时间】：2021-04-04 16:38:24
【问题描述】：

假设我有一个这样的对象数组。

const top100Films = [
  { title: 'The Shawshank Redemption', year: 19 },
  { title: 'The Godfather', year: 19 },
  { title: 'The Godfather: Part II', year: 19 },
  { title: 'The Dark Knight', year: 20 },
  { title: '12 Angry Men', year: 19 },
  { title: "Schindler's List", year: 20 },
  { title: 'Pulp Fiction', year: 20 },
  { title: 'The Lord of the Rings: The Return of the King', year: 20 },
  { title: 'The Good, the Bad and the Ugly', year: 19 },
  { title: 'Fight Club', year: 20 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 20 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 19 },
  { title: 'Forrest Gump', year: 19 },
  { title: 'Inception', year: 20 },
  { title: 'The Lord of the Rings: The Two Towers', year: 20 },
  { title: "One Flew Over the Cuckoo's Nest", year: 19 },
  { title: 'Goodfellas', year: 19 },
]

如何根据他们在 material-ui 自动完成方面的年限将其分组显示？我试过了，但我遇到了错误。

 <Autocomplete
      id="grouped-demo"
      options={top100Films.map(option) => option.title)}
      groupBy={(option) => option.year}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="With categories" variant="outlined" />}    
 />

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

options={options.sort((a, b) =>
        b.year.toString().localeCompare(a.year.toString())
      )}

将其放入您的自动完成中，然后您将获得电影排序并按年份分组。但请确保所有代码都与 material-ui 完全一致或者只将您的数组名称添加到选项中，无需使用地图

【讨论】：