当前位置: 首页 > 工具软件 > Material UI > 使用案例 >

material-ui Autocomplete 中的过滤选项方法

谷梁存
2023-12-01

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);
    }}
/>
 类似资料: