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

Question

我在我的 React 应用程序中使用 material UI 自动完成字段，我希望其中的搜索仅从关键字的开头开始工作（对于对象的某些字段）：

例如，如果选项是

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

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

Answer 1

https://material-ui.com/components/autocomplete/#multiple-values

有效，你需要添加多个

  <Autocomplete
    multiple
    id="tags-standard"
    options={top100Films}
    getOptionLabel={option => option.title}
    defaultValue={[top100Films[13]]}
    renderInput={params => (
      <TextField
        {...params}
        variant="standard"
        label="Multiple values"
        placeholder="Favorites"
      />
    )}
  />

Answer 2

使其与 filterOptions 自动完成道具和 'match-sorter' 库一起使用：

const filterOptions = (options,{ inputValue }) =>
    matchSorter(options, inputValue, {
      keys: [
        { threshold: matchSorter.rankings.STARTS_WITH, key: 'data1' },
        { threshold: matchSorter.rankings.STARTS_WITH, key: 'data2' },
        'data3',
      ],
    });

Answer 3

我想添加一些关于过滤的额外信息。您还可以使用 MUI 自动完成提供的 createFilterOptions。

示例：

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

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

<Autocomplete filterOptions={filterOptions} />

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

ignoreAccents（布尔值 [可选]）
ignoreCase（布尔值[可选]）
限制（数量[可选]）
matchFrom ('any' | 'start' [可选])
字符串化（函数 [可选]）
trim（布尔值 [可选]）

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

希望这对某人有所帮助！

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

Material UI Autocomplete - Search only from the beginning of the word

search

autocomplete

reactjs

material-ui