如何限制Ant Design AutoComplete组件的下拉匹配结果展示数量

实现方案 #

Ant Design的AutoComplete组件未内置展示条数限制配置，可通过手动过滤匹配结果并截取前5条的方式实现需求，改动量很小，不影响原有匹配逻辑。

完整可运行代码 #

import { useState } from 'react';
import { AutoComplete } from 'antd';

// 全量原始数据集
const allOptions = [
  { value: 'Test 1' },
  { value: 'Test 2' },
  { value: 'Test 3' },
  { value: 'Test 4' },
  { value: 'Test 5' },
  { value: 'Test 6' },
  { value: 'Test 7' },
  { value: 'Test 8' },
  { value: 'Test 9' },
  { value: 'Test 10' }
];

const Complete = () => {
  // 维护实际传给组件的下拉选项
  const [options, setOptions] = useState(allOptions.slice(0, 5));

  const handleSearch = (inputValue) => {
    // 输入为空时默认返回前5条，可根据需求调整为空数组
    if (!inputValue) {
      setOptions(allOptions.slice(0, 5));
      return;
    }
    // 按原有规则过滤匹配项
    const matchedList = allOptions.filter(option => 
      option.value.toUpperCase().includes(inputValue.toUpperCase())
    );
    // 仅保留前5条匹配结果
    setOptions(matchedList.slice(0, 5));
  };

  return (
    <AutoComplete
      style={{ width: 200 }}
      options={options}
      placeholder="try to type `t`"
      onSearch={handleSearch}
      // 关闭组件自带过滤，避免重复处理
      filterOption={false}
    />
  );
};

ReactDOM.render(<Complete />, mountNode);

注意事项 #

• 必须显式设置filterOption={false}，否则组件会在你过滤后的结果上二次过滤，导致逻辑异常
• 匹配规则和你原有逻辑完全一致，仅新增了结果截取逻辑，不会影响原有匹配效果
• 如果你的数据是异步从接口获取，只需把allOptions替换为接口返回的全量数据集即可，其余逻辑无需调整

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