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

Question

目前正在使用 Google Material-UI 自动完成组件。当我在输入字段上键入内容时，它只会过滤“getOptionLabel”选项字段。但是，我希望自动完成功能可以过滤多个字段。根据文档，我可以使用 CreateFilterOptions 添加一个更多字段或使用匹配排序器使其工作。

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

---

我们还可以为自动完成道具 getOptionLabel 编写我们自己的 createFilterOptions 函数，它可以支持 multi-additional-filter 和像 matchFrom: 'start' 这样的道具。

• MUI文件Autocomplete props API

如果你认为这是一个有价值的功能，你也可以发起一个 issue。

• MUI 的新问题feature