Material UI 自动完成 - 仅从单词开头搜索

Question

我在 React 应用程序中使用了 Material UI Autocomplete 字段，并且我希望其中的搜索仅从关键字的开头开始工作（对于对象的某些字段）：

例如，如果选项是

[
  {data1:'abc', data2:'a123'},
  {data1:'cba', data2:'345'},
  {data1:'bca3', data2:'654'}
]

然后我输入a- 只应出现第一个选项。如果我输入3- 只会出现第二个选项。

Answer 1

我想添加一些有关过滤的额外信息。您还可以使用createFilterOptionsMUI 自动完成提供的功能。

例子：

import { createFilterOptions } from '@material-ui/lab/Autocomplete';

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

<Autocomplete filterOptions={filterOptions} />

您可以设置一些可选的过滤器：

• ignoreAccents（布尔值[可选]）
• ignoreCase（布尔值[可选]）
• 限制（数量[可选]）
• matchFrom（'任何'|'开始'[可选]）
• stringify（Func [可选]）
• 修剪（布尔值[可选]）

https://material-ui.com/components/autocomplete/

希望这可以帮助别人！