jQuery UI Autocomplete列表末尾添加自定义div失败求解决方案

可以通过jQuery UI Autocomplete实现该需求，以下是修正后的两种可行方案：

方案一：修正_renderMenu方法（保持菜单结构一致性） #

原方案直接在菜单ul中追加div会破坏Autocomplete默认的li结构，导致样式或脚本异常，将自定义内容包裹在li中即可解决：

autoCompleteDiv.data("ui-autocomplete")._renderMenu = function (ul, items) {
    var that = this;
    let extraContent = '';
    // 遍历渲染正常选项
    $.each(items, function (_key, value) {
        if (!value.IsExtraDivHtml) {
            that._renderItemData(ul, value);
        } else {
            extraContent = value.ExtraDivHtml;
        }
    });
    // 将自定义内容包裹在li中追加到菜单
    if (extraContent.length > 0) {
        $('<li class="autocomplete-custom-item">').append(extraContent).appendTo(ul);
    }
};

注意： #

• 给自定义li添加专属class（如autocomplete-custom-item），方便单独调整样式，避免和默认选项冲突。
• 如果自定义内容不需要可点击，可添加CSS：.autocomplete-custom-item { pointer-events: none; }

方案二：利用Autocomplete的open事件（更稳妥的非侵入式方案） #

通过监听open事件，在菜单完全渲染后追加内容，不干扰原有渲染逻辑：

autoCompleteDiv.autocomplete({
    // 你的其他配置（source、select等）
    open: function() {
        var $menu = $(this).data("ui-autocomplete").menu.element;
        // 自定义内容示例，可替换为你的HTML
        var customHtml = '<div class="autocomplete-footer">自定义底部内容</div>';
        // 包裹在li中追加到菜单末尾
        $('<li class="autocomplete-custom-item">').append(customHtml).appendTo($menu);
    }
});

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