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

Posted 2023-02-22

【中文标题】仅使用 getOptionLabel 字段进行材质自动完成过滤

【英文标题】：Material Autocomplete only filtering with getOptionLabel field

【发布时间】：2020-07-31 04:40:17

【问题描述】：

目前正在使用 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

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

【参考方案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

【讨论】：

感谢您的回复，我将提出一个新问题以请求该功能。我喜欢通过跳过“matchFrom”道具将字符串附加在一起的想法。但是我有将近 50 个字段要包含在内，匹配排序器对我来说非常有用。

@user3446256 是的，如果这有帮助，请点赞：)

我已经为您的评论点赞，但我的声望不到 15。它不会公开出现:(