Antd如何为带复选框的下拉菜单添加搜索过滤功能

预期实现效果：

针对你当前用Menu+Checkbox组合实现下拉的场景，有两种成熟实现方案，优先推荐第一种：

方案1：使用内置Select组件（开发成本最低、交互最规范） #

不需要手动拼接Menu和Checkbox，antd的Select组件原生支持搜索、多选能力，完全匹配需求场景：

• 核心配置说明：
  • 添加mode="multiple"属性开启多选模式，组件会自动渲染选项勾选状态
  • 添加showSearch属性开启搜索输入能力
  • 通过filterOption属性自定义搜索匹配规则，默认支持按选项文本模糊匹配
  • 如果需要自定义选项样式，可通过optionRender属性完全自定义选项内容，和你现有Menu.Item的布局效果一致
• 可直接运行的代码示例：

import { Select } from 'antd';

// 下拉选项数据
const coinOptions = [
  { value: 'btc', label: 'BTC1' },
  { value: 'eth', label: 'ETH2' },
  { value: 'usdt', label: 'USDT3' },
];

export default function SearchSelect() {
  return (
    <Select
      mode="multiple"
      showSearch
      placeholder="请选择对应币种"
      style={{ width: 260 }}
      // 自定义搜索逻辑：不区分大小写匹配选项文本
      filterOption={(input, option) => 
        option.label.toLowerCase().includes(input.trim().toLowerCase())
      }
      options={coinOptions}
    />
  )
}

方案2：基于现有Menu组件改造（适配已有代码逻辑） #

如果你的业务已经基于Menu写了大量交互逻辑、不想重构为Select，可以按照以下逻辑添加搜索能力：

• 在下拉弹层顶部插入Input搜索框，作为搜索入口
• 用状态存储用户输入的搜索关键词
• 渲染Menu列表前，先根据关键词过滤原始选项数据，只渲染匹配命中的选项
• 增加无匹配结果的空状态提示
• 核心代码示例：

import { useState } from 'react';
import { Dropdown, Menu, Input, Checkbox } from 'antd';

// 原始菜单数据
const originalMenuData = [
  { key: 'btc', text: 'BTC1' },
  { key: 'eth', text: 'ETH2' },
  { key: 'usdt', text: 'USDT3' },
];

export default function CustomSearchMenu() {
  const [searchKey, setSearchKey] = useState('');
  // 过滤后要渲染的菜单数据
  const showMenuData = originalMenuData.filter(item => 
    item.text.toLowerCase().includes(searchKey.trim().toLowerCase())
  );

  const dropdownContent = (
    <div>
      {/* 搜索输入框 */}
      <div style={{ padding: 8, borderBottom: '1px solid #f0f0f0' }}>
        <Input
          placeholder="输入关键词搜索"
          value={searchKey}
          onChange={e => setSearchKey(e.target.value)}
          allowClear
        />
      </div>
      {/* 选项列表 */}
      <Menu>
        {showMenuData.length ? showMenuData.map(item => (
          <Menu.Item key={item.key}>
            {item.text}
            <Checkbox style={{ float: 'right' }} />
          </Menu.Item>
        )) : (
          <Menu.Item disabled>无匹配结果</Menu.Item>
        )}
      </Menu>
    </div>
  );

  return (
    <Dropdown overlay={dropdownContent} trigger={['click']}>
      <button style={{ width: 260, padding: '4px 11px' }}>
        请选择币种
      </button>
    </Dropdown>
  )
}

注意：自定义Menu方案需要自行处理多选值存储、勾选状态联动、弹层开关控制、键盘交互等逻辑，开发和维护成本更高，非特殊场景不推荐使用。

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