如何在Ant Design AutoComplete的搜索框与下拉菜单间插入组件

Ant Design的AutoComplete组件仅允许输入类组件作为直接子元素，你直接在内部添加<p>标签会破坏组件的DOM结构与状态管理逻辑，导致异常。以下是两种可行的实现方案：

方案一：下拉展开时显示文本（推荐） #

利用AutoComplete提供的dropdownRender属性自定义下拉区域，在选项列表上方插入额外文本，这样文本会出现在搜索框与下拉选项之间：

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

export default function SearchBoxEvents() {
    const [options, setOptions] = useState<
    { value: string; label: JSX.Element }[]
    >([]);
    const handleSearch = (input: string) => {
        let res: { value: string; label: JSX.Element }[] = [];
        if (!input) {
            res = [];
        } else {
            // 模拟搜索结果
            res = ["event 1", "event 2", "event 3"]
            .map((event) => ({
                value: event,
                label: <span>Some icon {event}</span>
            }));
        }
        setOptions(res);
    };
    return (
        <AutoComplete
            onSearch={handleSearch}
            options={options}
            // 自定义下拉内容，添加额外文本
            dropdownRender={menu => (
                <>
                    <div style={{ padding: '8px 12px', color: '#666', borderBottom: '1px solid #f0f0f0' }}>
                        "example text"
                    </div>
                    {menu}
                </>
            )}
        >
            <Input.Search size="large" placeholder="to be replaced" />
        </AutoComplete>
    );
}

方案二：始终显示文本在搜索框下方 #

如果需要文本持续显示在搜索框下方（无论下拉是否展开），可以将搜索框与文本包裹在父容器中，调整样式适配下拉菜单位置：

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

export default function SearchBoxEvents() {
    const [options, setOptions] = useState<
    { value: string; label: JSX.Element }[]
    >([]);
    const handleSearch = (input: string) => {
        let res: { value: string; label: JSX.Element }[] = [];
        if (!input) {
            res = [];
        } else {
            // 模拟搜索结果
            res = ["event 1", "event 2", "event 3"]
            .map((event) => ({
                value: event,
                label: <span>Some icon {event}</span>
            }));
        }
        setOptions(res);
    };
    return (
        <div style={{ position: 'relative', width: '100%', maxWidth: 400 }}>
            <AutoComplete
                onSearch={handleSearch}
                options={options}
                // 调整下拉菜单位置，避开下方的文本
                dropdownStyle={{ top: 'calc(100% + 32px)' }}
            >
                <Input.Search size="large" placeholder="to be replaced" />
            </AutoComplete>
            <p style={{ margin: '8px 0 0 0', padding: '0 12px', color: '#666', fontSize: 14 }}>
                "example text"
            </p>
        </div>
    );
}

关键说明 #

• 方案一遵循Ant Design组件的设计规范，通过官方API实现，不会引发组件内部状态异常，适配性更好。
• 方案二需要手动调整下拉菜单的top值，确保下拉菜单不会被下方的文本遮挡，适合需要文本常驻的场景。

内容的提问来源于stack exchange，提问作者Gabriel Octavio Lozano Pinzón