使用 Material UI 自动完成按名称或 ID 搜索
Search by name or ID with Material UI autocomplete
我正在构建一个具有自动完成功能的搜索模式,我最终想要实现的是能够通过姓名或 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"
/>
)}
/>
您可以使用 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>
);
}
我正在构建一个具有自动完成功能的搜索模式,我最终想要实现的是能够通过姓名或 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"
/>
)}
/>
您可以使用 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>
);
}