使用两个键执行自动完成-使用react实现材质ui

ar5n3qh5 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(296)

当使用两个值中的任何一个进行搜索时，我尝试自动完成输入- 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" />
      )}
    />
  );
}

我使用代码沙盒创建了一个工作示例
有人能帮忙吗？

JavaScript reactjs material-ui

来源：https://stackoverflow.com/questions/68304745/perform-autocomplete-with-two-keys-material-ui-with-react

1条答案

按热度按时间

myzjeezk1#

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

/* 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 要自定义匹配项，请执行以下操作：

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

赞(0）回复(0）举报 2021-09-13

我来回答

使用两个键执行自动完成-使用react实现材质ui

1条答案

相关问题

热门标签

最新问答