如何基于MUI实现支持多值的自由文本过滤器（无需预定义选项）？

要实现无需预定义选项的自由文本多标签过滤器，你可以利用MUI Autocomplete组件的freeSolo属性，配合multiple模式来达成需求。核心是让组件允许用户输入任意文本并自动转为标签，以下是具体实现方案：

完整代码示例 #

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

const FreeTextFilter = () => {
  // 存储用户输入的所有过滤标签
  const [filters, setFilters] = useState([]);

  return (
    <Autocomplete
      // 开启多标签模式
      multiple
      // 允许输入非预定义选项的自由文本
      freeSolo
      // 可选：将已输入的标签作为下拉建议，不需要的话设为[]即可
      options={filters}
      value={filters}
      // 同步标签数组的更新（添加/删除）
      onChange={(event, newValue) => {
        setFilters(newValue);
      }}
      // 自定义标签的渲染样式，用Chip实现带删除按钮的标签
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip
            key={index}
            label={option}
            {...getTagProps({ index })}
            // 自定义删除逻辑
            onDelete={() => {
              const newFilters = [...filters];
              newFilters.splice(index, 1);
              setFilters(newFilters);
            }}
          />
        ))
      }
      // 渲染输入框
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          label="自由文本过滤器"
          placeholder="输入过滤条件后回车"
        />
      )}
    />
  );
};

export default FreeTextFilter;

关键属性说明 #

• freeSolo: 核心属性，允许用户输入任意文本，无需匹配预定义的options列表
• multiple: 开启多标签模式，支持同时添加多个过滤条件
• renderTags: 自定义标签的显示样式和交互逻辑，这里用Chip组件实现带删除按钮的标签效果
• options: 可以设置为空数组，也可以将用户已输入的标签作为下拉建议，方便重复输入

可选优化点 #

1. 输入去重：在onChange里判断新输入的文本是否已存在，避免重复标签
2. 限制标签数量：添加逻辑限制最多可输入的标签个数
3. 自定义标签样式：给Chip组件添加颜色、大小等自定义样式
4. 回车自动添加：默认配置下，输入文本后回车即可自动转为标签，无需额外配置

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