使用两个键执行自动完成 - Material UI with React

当使用两个值之一搜索时，我试图自动完成输入 -title and year。但是，它仅在我搜索时才有效title。当我搜索时year，它不显示任何选项。

示例代码

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title || option.year}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

我使用创建了一个工作示例代码沙盒 https://codesandbox.io/s/material-demo-forked-n7kpc?file=/demo.js

有人可以帮忙吗？

实现此目的的一种方法是将年份作为选项标签的一部分：

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

import { top100Films } from "./movies";
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => `${option.title} (${option.year})`}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

如果你不想显示年份，但仍想匹配它，另一种方法是使用filterOptionsprop 来自定义匹配：

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { createFilterOptions } from "@material-ui/lab/Autocomplete";
import { top100Films } from "./movies";

const filterOptions = createFilterOptions({
  stringify: (option) => `${option.title} ${option.year}`
});

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      filterOptions={filterOptions}
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

相关文档：https://material-ui.com/components/autocomplete/#custom-filter https://material-ui.com/components/autocomplete/#custom-filter