How to search based on multiple criteria in AutoComplete API in material UI

Question

I have created a search box using the auto complete API. But it is only searching based on the title field from options and not searching the inputs on other fields.

If the object for example looks like this:

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994, abc: 'hello1', xyz: 'The nvm1' },
  { title: 'The Godfather', year: 1972, abc: 'hello2', xyz: 'Shaw' },
  { title: 'The Godfather: Part II', year: 1974,  abc: 'hello3', xyz: 'Part nvm3' },
];

so If I enter in the search field 'Shaw' or 'The' then it should search the input text among all the fields like title, abc, xyz keys and not only title

I stumbled upon filter options:

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: (option) => option.title,
});

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

But I don't know how to incorporate multiple fields searching from the input text in filter options.

Answer 1

Add stringify to options will solve your problem

getOptionLabel: (option) => JSON.stringify(option),

Answer 2

You just have to alter filter options,

const filterOptions = createFilterOptions({
 // remove this line here
  stringify: (option) => JSON.stringify(option),
});

comment if this doesnt help,