基于两个属性的自动完成 Material UI 搜索

Question

我有这些数据：

const sample = [
    {hero: 'DARTH VADER', faction: 'EMPIRE'},
    {hero: 'LUKE SKYWALKER', faction: 'REBEL'},
    {hero: 'GREEDO', faction: 'BOUNTY HUNTER'},
];

使用自动完成，我可以通过 hero 或 faction 属性搜索值，方法是在 getOptionLabel={(option) => {option.hero}} 或 getOptionLabel={(option) => {option.faction}} 属性中分配其中一个属性。

但是我希望能够同时使用这两个属性进行搜索（键入 DARTH VADER 或 EMPIRE 将返回相同的结果）。

问题如下：

1. 我可以使用单个自动完成来实现吗？
2. 如果不是，我们可以使用切换来更改要在自动完成中查找的属性吗？

非常感谢

Answer 1

自动完成提供了filterOptions 属性。

您可以使用它来提供像这样的自定义过滤器（这里是codesandbox）：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

const filterOptions = createFilterOptions({
  matchFrom: 'any',
  stringify: (option) => option.hero + option.faction,
});

export default function Filter() {
  return (
    <Autocomplete
      id="filter-demo"
      options={sample}
      getOptionLabel={(option) => option.hero}
      filterOptions={filterOptions}
      renderInput={(params) => <TextField {...params} label="Custom filter" variant="outlined" />}
    />
  );
}

const sample = [
  {hero: 'DARTH VADER', faction: 'EMPIRE'},
  {hero: 'LUKE SKYWALKER', faction: 'REBEL'},
  {hero: 'GREEDO', faction: 'BOUNTY HUNTER'},
];