如何解决使用material-ui自动完成功能搜索多个域
我正在将material-ui / autoComplete与reactjs一起使用。 在单个区域中搜索。如何使其搜索多个域。
所以我也想添加customerSurname字段。
在customerName字段上搜索。如何搜索CustomerSurname和customerIdentityNo字段?
<Autocomplete
id={'customer-search'}
options={this.state.customerItems}
getOptionLabel={(option) => option.customerName}
renderOption={(option) => (
<React.Fragment>
<span> {option.customerIdentityNo},</span>
<span> {option.customerName} {option.customerSurname} </span>
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
margin="normal"
variant="outlined"
InputProps={{
...params.InputProps,type: 'search'
}}
/>
)}
/>
解决方法
Ciao,要组合使用选项,我发现的唯一方法是在options
中创建一个包含所有所需值的数组。像这样:
<Autocomplete
id={'customer-search'}
options={this.state.customerItems.map((option) => return option.customerIdentityNo + "," + option.customerName + "," option.customerSurname)}
getOptionLabel={(option) => option.customerName}
renderOption={(option) => (
<React.Fragment>
<span> {option.split(",")[0]},</span>
<span> {option.split(",")[1]} {option.split(",")[2]} </span>
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
margin="normal"
variant="outlined"
InputProps={{
...params.InputProps,type: 'search'
}}
/>
)}
/>
通过这种方式,您可以将选项创建为字符串。然后在renderOption
上,您可以拆分此字符串并以自定义方式显示元素。
您可以使用fuse.js之类的库对集合中的任何字段执行搜索。他们有一个demo page,您可以在这里试用。
但是,您必须弄清楚如何与您使用的自动完成库集成。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。