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

Question

我有这个数据：

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

使用自动完成功能，我可以通过英雄或派系getOptionLabel={(option) => {option.hero}}属性通过在或prop中分配其中之一来搜索值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'},
];