所以我开始学习material UI,我有一个问题.

我们有个目标

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

推荐答案

MUI Autocomplete API有filterOptions(docs here)个props ,您可以在其中设置自定义过滤.

我会像这样实施它:

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

Javascript相关问答推荐

reaction useEffect KeyDown for each 条目配音输出

不渲染具有HTML参数的React元素

React Code不在装载上渲染数据,但在渲染上工作

在Vite React库中添加子模块路径

如何在模块层面提供服务?

在Three JS中看不到补间不透明度更改效果

虚拟滚动实现使向下滚动可滚动到末尾

我的角模板订阅后不刷新'

Chart.js-显示值应该在其中的引用区域

Angular 订阅部分相互依赖并返回数组多个异步Http调用

我在Django中的视图中遇到多值键错误

用于在路径之间移动图像的查询

将Node.js包发布到GitHub包-错误ENEEDAUTH

如何防止ionic 输入中的特殊字符.?

当从其他文件创建类实例时,为什么工作线程不工作?

将多个文本框中的输出合并到一个文本框中

不协调嵌入图片

在ChartJS中使用spanGaps时,是否获取空值的坐标?

需要刷新以查看Mern堆栈应用程序中的更改

JavaScript structuredClone在Chrome/Edge中获得了非法调用,但在NodeJS中没有