如何为Material UI的Autocomplete组件设置输入长度至少3位的过滤规则

现有代码的核心问题点 #

• onInputChange回调取值错误：Material UI的Autocomplete组件onInputChange的第二个参数才是更新后的输入值，直接从event.target取值会在组件内部触发输入变更（比如选中项清空、自动填充）时出现取值异常
• renderOption参数结构错误：MUI v5版本的renderOption回调第一个参数是要绑定到DOM节点的属性对象，第二个参数才是当前的选项值，你现在直接将第一个参数作为选项渲染，会导致渲染异常
• 手动控制open属性缺少边界处理：未处理选中选项、输入框失焦后的自动关闭逻辑，可能出现下拉框异常滞留的问题

修复后完整代码 #

import { useState } from 'react';
import Autocomplete, { FilterOptionsState } from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import matchSorter from 'match-sorter';

// 假设你的外部变量id、value、className、classes、handleChange、ListboxComponent、renderGroup、options已正确定义
const YourComponent = () => {
  const [inputValue, setInputValue] = useState("");
  // 新增控制下拉框显隐的状态，避免手动绑定open的异常
  const [open, setOpen] = useState(false);

  const filterOptions = (options: string[], { inputValue }: FilterOptionsState<string>) => {
    if (inputValue.length >= 3) {
      return matchSorter(options, inputValue);
    }
    return [];
  };

  return (
    <Autocomplete
      id={id}
      value={value}
      inputValue={inputValue}
      className={className}
      onInputChange={(_, newInputValue) => {
        setInputValue(newInputValue);
        // 输入长度符合要求才打开下拉框
        setOpen(newInputValue.length >= 3);
      }}
      onClose={() => setOpen(false)}
      classes={classes}
      onChange={(event, newValue, reason) => {
        handleChange(event, newValue, reason);
        // 选中选项后关闭下拉框、清空输入值，可根据业务需求调整
        setOpen(false);
        setInputValue("");
      }}
      ListboxComponent={ListboxComponent}
      renderGroup={renderGroup}
      options={options || []}
      filterOptions={filterOptions}
      groupBy={(option) => option[0].toUpperCase()}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" placeholder="Vendor name" />
      )}
      // 修正renderOption参数顺序
      renderOption={(props, option) => {
        return (
          <li {...props}>
            <Tooltip title={option} placement="right-end">
              <Typography noWrap>{option}</Typography>
            </Tooltip>
          </li>
        );
      }}
      open={open}
    />
  );
};

额外优化说明 #

• 将长度判断改为>=3更符合「最小3位输入」的业务描述
• 单独用open状态管控下拉显隐，避免和输入值强绑定导致的各种边界异常
• 修正了renderOption的根节点为li标签，符合HTML语义规范，也能正确承接MUI注入的事件和样式属性

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