Autocomplete 有一个 filterOptions方法:可以自由决定哪些选项可用,哪些将隐藏。
如果只想显示所有选项,只需实现filterOptions返回所有值:
filterOptions={(options, state) => options}
实现 不区分大小写模糊查询 项目名或编码:
<Autocomplete
value={values.fundSource}
inputValue={fundSourceInput}
options={fundSourceOptions}
getOptionLabel={(option) => option.name}
filterOptions={(options) => {
const reg = new RegExp(fundSourceInput, 'i');
const array = options.filter((item) => reg.test(item.name) || reg.test(item.code));
return array;
}}
renderInput={(params) => (
<TextField
{...params}
label="资金来源"
error={hasError('fundSourceId')}
helperText={hasError('fundSourceId') ? errors.fundSourceId[0] : null}
variant="outlined"
required
fullWidth
/>
)}
renderOption={(option) => (
<ListItemText
primary={option.name}
secondary={`编码:${option.code}`}
/>
)}
onChange={(event, value) => {
handleSetFormValue('fundSource', value);
if (value?.id) {
dispatch({
type: INCOMESETTLEMENT_SETTING,
payload: {
setting: {
disburseTypeList: value.disburseTypes,
},
},
});
handleSetFormValue('fundSourceId', value.id);
} else {
handleSetFormValue('fundSourceId', '');
}
}}
onInputChange={(event, value) => {
setFundSourceInput(value);
}}
/>