如何为MUI Data Grid预定义筛选值添加自动补全选项

要实现筛选输入框的动态提示（输入关键词后显示匹配选项），仅靠静态的valueOptions和type属性是不够的，需要结合自定义筛选输入组件来实现。以下是具体方案：

1. 配置列的筛选规则 #

在目标列（比如「城市」列）的配置中，自定义筛选操作并指定输入组件：

const columns = [
  {
    field: 'city',
    headerName: '城市',
    width: 150,
    filterable: true,
    // 自定义筛选操作，替换默认的筛选逻辑
    filterOperators: [
      {
        label: '包含',
        value: 'contains',
        // 定义筛选匹配逻辑
        getApplyFilterFn: (filterItem) => {
          return (row) =>
            row.city?.toLowerCase().includes(filterItem.value?.toLowerCase() || '');
        },
        // 指定自定义的筛选输入组件
        InputComponent: CityFilterAutocomplete,
      },
    ],
  },
  // 其他列配置...
];

2. 实现带动态提示的筛选输入组件 #

使用MUI的Autocomplete组件封装筛选输入框，支持输入关键词时显示匹配选项：

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

// 示例城市列表，实际可替换为后端接口数据
const allCities = ['New Orleans', 'New York', 'Los Angeles', 'Chicago', 'New Jersey'];

function CityFilterAutocomplete(props) {
  const { item, onChange } = props;

  const handleSelect = (_, newValue) => {
    // 更新筛选值
    onChange({ ...item, value: newValue });
  };

  return (
    <Autocomplete
      freeSolo // 允许输入非选项内的内容
      options={allCities}
      renderInput={(params) => (
        <TextField
          {...params}
          label="搜索城市"
          variant="outlined"
          size="small"
        />
      )}
      value={item.value || ''}
      onChange={handleSelect}
    />
  );
}

3. 适配后端动态获取选项（可选） #

如果城市数据来自后端接口，可在组件中添加防抖逻辑，根据输入关键词动态拉取匹配数据：

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

function CityFilterAutocomplete(props) {
  const { item, onChange } = props;
  const [cities, setCities] = useState([]);
  const [inputValue, setInputValue] = useState(item.value || '');

  useEffect(() => {
    // 防抖：输入停止300ms后再请求接口
    const timer = setTimeout(async () => {
      if (!inputValue) {
        setCities([]);
        return;
      }
      // 替换为你的后端接口地址
      const res = await fetch(`/api/cities?keyword=${inputValue}`);
      const data = await res.json();
      setCities(data);
    }, 300);

    return () => clearTimeout(timer);
  }, [inputValue]);

  const handleSelect = (_, newValue) => {
    onChange({ ...item, value: newValue });
  };

  const handleInputChange = (_, newInputValue) => {
    setInputValue(newInputValue);
  };

  return (
    <Autocomplete
      freeSolo
      options={cities}
      renderInput={(params) => (
        <TextField
          {...params}
          label="搜索城市"
          variant="outlined"
          size="small"
        />
      )}
      value={item.value || ''}
      onChange={handleSelect}
      inputValue={inputValue}
      onInputChange={handleInputChange}
    />
  );
}

为什么之前的配置不生效？ #

• 静态valueOptions配合type: 'singleSelect'仅会生成下拉选择框，不支持输入实时筛选提示
• 默认的筛选输入组件没有内置Autocomplete功能，必须自定义输入组件才能实现动态提示

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