通过Material UI自动完成功能按名称或ID进行搜索

问题描述

我正在构建一个具有自动完成功能的搜索模式，我最终想要实现的是能够通过人员的姓名或ID进行搜索。但是，当您从建议中选择一个人并且姓名进入输入字段时，我不希望显示ID（原因是真实ID确实很长而且看起来很丑）。 这是一个屏幕截图，可以更好地了解问题

当我从建议中选择一个选项时，我不希望数字6出现。

这是我的自动完成代码

 <Autocomplete
        multiple
        id="tags-outlined"
        options={students}
        onInputChange={(event) => event.target}
        getOptionLabel={({ firstName,lastName,id }) =>
          `${firstName} ${lastName} ${id}`
        }
        filterSelectedOptions
        renderOption={({ firstName,id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            className={classes.input}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />

解决方法

您可以使用createFilterOptions创建自定义过滤器，并将其作为filterOptions属性传递给Autocomplete。

在您的情况下，您必须提供一个stringify配置，此配置控制如何将选项转换为字符串，以便可以将其与输入文本片段– docs进行匹配。

...
import Autocomplete,{ createFilterOptions } from "@material-ui/lab/Autocomplete";

const filterOptions = createFilterOptions({
  stringify: ({ firstName,lastName,id }) => `${firstName} ${lastName} ${id}`
});

function App() {
  return (
    <div>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={students}
        onInputChange={(event) => event.target}
        filterOptions={filterOptions}
        getOptionLabel={({ firstName,lastName }) => {
          // this is how our option will be displayed when selected
          // remove the `id` here
          return `${firstName} ${lastName}`;
        }}
        filterSelectedOptions
        renderOption={({ firstName,id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />
    </div>
  );
}