CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Olawale Oladiran
Olawale Oladiran

Reputation: 631

How to make a grouped autocomplete in material-ui

Say I have an array of objects like this.

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 },
]

How do I make it a grouped the display based on their years in material-ui autocomplete? I tried this but I'm getting errors.

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

Upvotes: 2

Views: 7076

Answers (1)

omnicron96
omnicron96

Reputation: 67

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

put this in your autocomplete then you get movie sort and grouped by year. but be sure that all the code is exact from the material-ui or instead add only your array name to option no need to use map

Upvotes: 5

Related Questions