Matrial-UI <Autocomplete /> 按多个参数搜索

Question

所以我开始学习 Material UI 我有一个问题。

我们有一个object

const top100Films = [
  { label: 'The Shawshank Redemption', year: 1994 },
  { label: 'The Godfather', year: 1972 }, 

  * ...More items *
]

现在如果我在我的自动完成中设置 getOptionLabel = {option => option.label} 它只会通过匹配标签（标题）进行搜索所以如果我输入年份即“1994”它不会在我的中显示“肖申克的救赎”搜索结果，如果我将其设置为 option.year，它将仅按年份搜索，除年份之外的任何输入都将无效。

这是我的问题：有没有办法设置它以便我可以按标题或按年份搜索。

解决方案：

<Autocomplete
  ...
  filterOptions={(options, { inputValue }) => options.filter(item => item.label.toLowerCase().includes(inputValue) || item.year.toString().includes(inputValue) )}
/>

Answer 1

MUI 自动完成 API 具有 filterOptions (docs here) 属性，您可以在其中设置自定义过滤。

我会像这样实现它：

<Autocomplete
  ...
  filterOptions={(options, { inputValue }) => options.filter(item => item.label.includes(inputValue) || item.year.toString.includes(inputValue) )}
/>

Matrial-UI <Autocomplete /> 按多个参数搜索

Matrial-UI <Autocomplete /> search by multiple parameters

javascript

reactjs

material-ui