使用 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它来创建自定义过滤器并将其作为filterOptionsprop传递给Autocomplete.

\n

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

\n

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

\n

\n