如何解决通过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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。