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

Question

我试图在使用两个值之一搜索时自动完成输入 - title和 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" />
      )}
    />
  );
}

我使用 Code Sandbox 创建了一个工作示例
有人可以帮忙吗？

Answer 1

使这项工作的一种方法是将年份作为选项标签的一部分:

/* 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" />
      )}
    />
  );
}

如果您不想显示年份，但仍想对其进行匹配，另一种方法是使用 filterOptions Prop 自定义匹配:

/* 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