Perform autocomplete with two keys - Material UI with React

user_7004388 0
Viewed 256

I'm trying to autocomplete the input when searched with either of the two values - title and year. However, it does only work when I search with title. When I search with year, it does not show any options.

Sample code

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title || option.year}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

I have created a working example using Code Sandbox

Could anyone please help?

material-ui reactjs javascript
1 Answers

One way to make this work is to make the year part of the option label:

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

import { top100Films } from "./movies";
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => `${option.title} (${option.year})`}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Edit autocomplete title and year

If you don't want to display the year, but still want to match on it, the other way is to use the filterOptions prop to customize the matching:

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { createFilterOptions } from "@material-ui/lab/Autocomplete";
import { top100Films } from "./movies";

const filterOptions = createFilterOptions({
  stringify: (option) => `${option.title} ${option.year}`
});

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      filterOptions={filterOptions}
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

Edit autocomplete title and year

Related documentation: https://material-ui.com/components/autocomplete/#custom-filter

user_74959300
Related