如何获取MUI 5 Autocomplete组件过滤后的选项数量？

实现思路 #

我们通过包装MUI内置的默认filterOptions函数的方式实现计数，完全不修改原有过滤逻辑，符合不改变filterOptions默认行为的要求：

• 先导入MUI官方提供的默认filterOptions工具函数
• 自定义包装函数调用默认过滤逻辑，拿到过滤结果后统计长度存入本地状态
• 把包装后的函数传给Autocomplete的filterOptions属性即可

完整代码示例 #

import { useState } from 'react';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

// 初始化MUI默认的过滤配置，和Autocomplete内置默认行为完全一致
const defaultFilterOptions = createFilterOptions();

export default function App() {
  // 存储过滤后选项的数量
  const [filteredOptionCount, setFilteredOptionCount] = useState(0);
  // 示例选项列表
  const options = ['苹果', '香蕉', '橙子', '葡萄', '芒果', '菠萝'];

  return (
    <div>
      <p>当前过滤后选项数量：{filteredOptionCount}</p>
      <Autocomplete
        options={options}
        renderInput={(params) => <TextField {...params} label="水果选择" />}
        // 包装默认过滤函数，仅增加计数逻辑，不修改原有过滤行为
        filterOptions={(options, state) => {
          const filteredResult = defaultFilterOptions(options, state);
          setFilteredOptionCount(filteredResult.length);
          return filteredResult;
        }}
      />
    </div>
  );
}

注意事项 #

• createFilterOptions支持传入配置参数，如果你之前自定义过过滤的匹配规则（比如ignoreAccents、matchFrom等），只要和你之前的配置保持一致，即可完全保留原有过滤效果
• 该方案性能开销极低，仅在每次过滤触发时多执行一次长度统计和状态更新操作，不会影响组件正常渲染

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