javascript - 仅使用 getOptionLabel 字段进行 Material 自动完成过滤

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' ，我们可以简单地通过绑定(bind)两个字符串来完成它。请注意，它确实有潜在的错误。

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

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

我们也可以自己写createFilterOptions自动完成 Prop 功能 getOptionLabel可以支持multi-additional-filter像 matchFrom: 'start' 这样的 Prop .

MUI文件Autocomplete props API

如果您认为这是一个有值(value)的功能，您也可以启动一个问题。

MUI 的新问题 feature