MUI Autocomplete组件：实现输入3个字符后触发过滤

要实现输入超过3个字符才触发过滤的需求，你可以通过MUI Autocomplete的filterOptions属性自定义过滤逻辑，同时保留弹窗始终打开的设置。以下是修改后的完整代码：

<Autocomplete
    open
    multiple
    disableCloseOnSelect
    options={permissions as Permission[]}
    getOptionLabel={(option) => option.name}
    disablePortal
    // 自定义过滤规则
    filterOptions={(options, { inputValue }) => {
        // 输入长度<=3时返回所有选项，不触发过滤
        if (inputValue.trim().length <= 3) {
            return options;
        }
        // 输入长度>3时，执行大小写不敏感的模糊匹配过滤
        return options.filter(option =>
            option.name.toLowerCase().includes(inputValue.toLowerCase())
        );
    }}
    renderTags={() => <div>{`${values.permissions?.length} Selected`}</div>}
    id="combo-box-demo"
    renderInput={(params) => <TextField {...params} label="Permissions" name="search" />}
    ListboxProps={{ style: { maxHeight: '240px' } }}
    renderOption={({ name }) => (
        <Field
            style={{ height: '30px' }}
            as={FormControlLabel}
            name="permissions"
            value={name}
            label={name}
            control={<Checkbox color={'primary'} checked={values.permissions?.includes(name)} />}
        />
    )}
/>

关键说明： #

• filterOptions属性：这是MUI Autocomplete提供的自定义过滤入口，直接接收原始选项列表和组件内部状态（包含用户输入的inputValue）。
• 过滤逻辑控制：判断输入内容去除首尾空格后的长度，≤3时返回全部选项，相当于关闭过滤；>3时再对选项名称进行模糊匹配。
• 非受控兼容：完全依赖Autocomplete内部管理的inputValue，不需要额外维护输入框状态，符合你非受控组件的要求。
• 弹窗保持打开：保留原有的open和disableCloseOnSelect属性，确保选项弹窗始终处于展开状态。

如果需要调整匹配规则（比如精确匹配、匹配其他字段），只需修改filterOptions内部的过滤条件即可。

内容的提问来源于stack exchange，提问作者Kiril