使用 Material UI 自动完成按名称或 ID 搜索

Question

我正在构建一个具有自动完成功能的搜索模式，我最终想要实现的是能够通过姓名或 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, lastName, 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"
          />
        )}
      />

Answer 1

您可以使用 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, lastName, id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />
    </div>
  );
}

使用 Material UI 自动完成按名称或 ID 搜索

Search by name or ID with Material UI autocomplete

reactjs

autocomplete

material-ui