Question

当前正在使用Google material-UI自动填充组件。当我在输入字段上键入内容时，它只会在“ getOptionLabel”选项字段上进行过滤。但是，我希望自动完成功能可以过滤多个字段。根据文档，我可以使用CreateFilterOptions添加一个字段或使用match-sorter使其工作。

https://material-ui.com/components/autocomplete/#createfilteroptions-config-filteroptions

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

<Autocomplete filterOptions={filterOptions} />

在stringify中，我想知道是否可以返回整个对象而不是仅返回option.title

如果我做错了事，请纠正我。

Answer 1

首先，multi-additional-filter当前似乎不支持createFilterOptions。

Material-UI自动完成createFilterOptions的来源

const filteredOptions = options.filter(option => {
  let candidate = (stringify || getOptionLabel)(option);
  if (ignoreCase) {
    candidate = candidate.toLowerCase();
  }
  if (ignoreAccents) {
    candidate = stripDiacritics(candidate);
  }
  return matchFrom === "start"
    ? candidate.indexOf(input) === 0
    : candidate.indexOf(input) > -1;
});

我们可以看到它实际上是通过属性过滤选项的，这些属性被编码为仅接受一个进行比较。

解决方案

作为一种解决方法，如果不需要matchFrom: 'start'，则可以通过绑定两个字符串来简单地进行操作。注意它确实存在潜在的错误。

const filterOptions = createFilterOptions({
  // matchFrom: 'start',
  stringify: (option) => option.title + option.text, // make it one for it
});

在线试用：https://stackblitz.com/edit/gwmqss

我们还可以为自动完成道具createFilterOptions编写我们自己的getOptionLabel函数，该函数可以与multi-additional-filter之类的道具一起支持matchFrom: 'start'。

MUI Autocomplete props API的文档

如果您认为这是一项有价值的功能，也可以开始发行。

MUI feature的新问题

仅使用getOptionLabel字段进行材料自动完成过滤

1 个答案:

解决方案