Material UI Autocomplete如何获取用户输入时实时更新的下拉选项

有两种官方原生支持的方式可以拿到下拉面板实时展示的过滤后选项，不需要额外重写匹配逻辑：

• 两种方式拿到的结果和组件实际渲染的下拉列表完全一致：输入为空时返回全量选项，输入搜索关键词后返回匹配后的筛选结果。

方法1：通过filterOptions属性拦截过滤结果（推荐） #

这个方法可以在不改变组件默认过滤行为的前提下，实时拿到过滤后的选项，适合需要对筛选结果做额外业务处理的场景：

1. 先引入MUI提供的默认过滤方法，初始化本地状态存储筛选结果

   import { Autocomplete, TextField, createFilterOptions } from '@mui/material';
   import { useState } from 'react';
   
   // 初始化和组件默认行为完全一致的过滤器
   const defaultFilter = createFilterOptions();
   
   export default function SearchComponent() {
     // 存储实时过滤后的选项列表
     const [visibleOptions, setVisibleOptions] = useState([]);
   
     // 原有top100Films数据保持不变
     const top100Films = [/* 你的原有电影数据 */];
   
     return (
       <Autocomplete
         freeSolo
         id="free-solo-2-demo"
         disableClearable
         options={top100Films.map((option) => option.title)}
         // 自定义过滤逻辑
         filterOptions={(allOptions, filterState) => {
           // 先走默认过滤逻辑，得到实际要渲染的选项
           const filteredResult = defaultFilter(allOptions, filterState);
           // 把结果存到状态里，这里就可以拿到你需要的实时筛选列表
           setVisibleOptions(filteredResult);
           // 把结果返回给组件，保证下拉渲染逻辑和原来完全一致
           return filteredResult;
         }}
         renderInput={(params) => (
           <TextField
             {...params}
             label="Search input"
             InputProps={{
               ...params.InputProps,
               type: 'search',
             }}
           />
         )}
       />
     )
   }
   

• 如果你需要自定义过滤规则（比如调整匹配敏感度、是否忽略大小写、是否是否支持关键词模糊匹配位置），直接把配置项传给createFilterOptions即可，不会影响结果获取。

方法2：通过组件ref直接读取内部维护的筛选结果 #

如果你不需要实时监听结果变化，只是在特定时机（比如提交、下拉展开时）获取当前展示的选项，可以直接通过ref读取组件实例上的内置属性，代码改动最小：

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

export default function SearchComponent() {
  const autocompleteRef = useRef(null);
  const top100Films = [/* 你的原有电影数据 */];

  const getCurrentVisibleOptions = () => {
    // 任意需要的时机调用，就能拿到当前下拉展示的筛选后选项
    const currentList = autocompleteRef.current?.filteredOptions;
    console.log('当前下拉展示的选项：', currentList);
  }

  return (
    <Autocomplete
      ref={autocompleteRef}
      freeSolo
      id="free-solo-2-demo"
      disableClearable
      options={top100Films.map((option) => option.title)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search input"
          InputProps={{
            ...params.InputProps,
            type: 'search',
          }}
        />
      )}
    />
  )
}

注意：filteredOptions是Autocomplete组件内部实时维护的属性，每次输入变化、列表重渲染都会自动更新，不需要手动触发同步。

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