Material UI Autocomplete未按输入值过滤选项问题求助

你遇到的核心问题是手动覆盖了TextField的onChange事件，打断了Material UI Autocomplete组件的内置筛选逻辑；同时手动维护选项状态的方式未与组件生命周期对齐，导致UI无法同步更新。

方案一：利用Autocomplete内置筛选（推荐） #

Autocomplete默认会根据输入值自动筛选options，无需自行编写onChange和手动过滤逻辑。只需将全局过滤后的描述数组传给options，并使用组件提供的回调监听输入变化即可：

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

function YourComponent() {
  const [searchInput, setSearchInput] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  // 全局搜索过滤逻辑
  useEffect(() => {
    let filteredData = // 你的全局过滤逻辑，返回对象数组
    setFilteredData(filteredData);
  }, [searchInput]);

  const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];

  return (
    <Autocomplete 
      options={descriptionOptions}
      size="small"
      // 如需监听输入值变化，使用组件内置的onInputChange
      onInputChange={(event, newInputValue) => {
        // 这里可添加额外逻辑，比如更新其他状态
        // setDescriptionSearchText(newInputValue);
      }}
      renderInput={(params) => 
        <TextField 
          {...params} 
          sx={{
            width: '200px',   
            '& .MuiInputBase-root': {
              height: '40px',    
              padding: '8px',
            } 
          }}
          placeholder="搜索描述"
        />
      }
    />
  );
}

方案二：自定义筛选逻辑 #

如果需要特殊的筛选规则（比如模糊匹配、多字段匹配等），可以使用Autocomplete的filterOptions属性自定义筛选，无需手动维护选项状态：

<Autocomplete 
  options={descriptionOptions}
  size="small"
  // 自定义大小写不敏感的模糊筛选逻辑
  filterOptions={(options, params) => {
    const inputValue = params.inputValue.toLowerCase();
    return options.filter(option => 
      option.toLowerCase().includes(inputValue)
    );
  }}
  renderInput={(params) => 
    <TextField 
      {...params} 
      sx={{
        width: '200px',   
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
      placeholder="搜索描述"
    />
  }
/>

原代码失效的原因 #

1. 覆盖TextField的onChange后，Autocomplete无法捕获输入值变化，内置筛选逻辑完全失效；
2. 手动通过useEffect更新选项状态时，会与Autocomplete内部的筛选状态冲突，导致UI无法同步更新。

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