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

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

在字符串化时，我想知道是否可以返回整个对象而不仅仅是一个 option.title

如果我做错了什么，请纠正我。

Answer 1

首先，multi-additional-filter似乎目前不受createFilterOptions.

• Material-UI Autocomplete 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功能的新问题