如何在 material-ui 中進行分組自動完成

Question

假設我有一個這樣的對象數組。

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" />}    
 />

Answer 1

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

把它放在你的自動完成中，然后你會得到電影排序並按年份分組。 但請確保所有代碼都與 material-ui 完全相同，或者僅將您的數組名稱添加到選項中，無需使用 map