如何让jQuery UI Autocomplete新增Li项支持原生点击与键盘事件

核心问题原因 #

手动DOM追加的菜单项没有被Autocomplete组件纳入内部管理：组件会维护一个items集合存储所有合法菜单项的数据，动态添加的项既不在这个集合里，也没有绑定组件的事件逻辑，所以点击/键盘选择时ui.item会是undefined，键盘操作也无法触发选择。

推荐解决方案：用组件原生事件注入"加载更多"项 #

优先通过Autocomplete的response事件注入加载更多项，这样添加的项会被组件自动识别，天然支持点击和键盘操作。

1. 初始化Autocomplete时注入加载更多项

$("#autocomplete").autocomplete({
    source: function(request, response) {
        // 基础AJAX请求：仅发送输入关键词，不带show_more
        $.ajax({
            url: "你的接口地址",
            data: { term: request.term },
            dataType: "json",
            success: function(apiData) {
                // 接口返回has_more字段判断是否需要加载更多
                if (apiData.has_more) {
                    // 往结果数组末尾追加标记为"加载更多"的自定义项
                    apiData.results.push({
                        label: "加载更多结果",
                        value: request.term, // 保留当前输入的关键词
                        isShowMore: true // 自定义标记，用于区分普通项
                    });
                }
                // 把处理后的结果交给组件渲染菜单
                response(apiData.results);
            }
        });
    },
    select: function(event, ui) {
        // 判断是否是加载更多项
        if (ui.item.isShowMore) {
            event.preventDefault(); // 阻止默认的输入框填充行为
            // 发送带show_more参数的AJAX请求
            $.ajax({
                url: "你的接口地址",
                data: {
                    term: ui.item.value,
                    show_more: true
                },
                dataType: "json",
                success: function(newData) {
                    // 获取Autocomplete实例，渲染新结果
                    var autocomplete = $(this).data("ui-autocomplete");
                    // 直接用新结果更新菜单（如果需要保留之前的结果，可合并数组后再传入）
                    autocomplete._response(newData.results);
                }.bind(this)
            });
            return false;
        }
        // 普通项的选择逻辑，比如填充输入框
        // $("#autocomplete").val(ui.item.label);
    },
    focus: function(event, ui) {
        // 阻止加载更多项聚焦时自动填充输入框
        if (ui.item.isShowMore) {
            event.preventDefault();
        }
    }
});

特殊场景：必须手动追加DOM的处理方式 #

如果因为业务限制必须手动操作DOM，需要给新项绑定组件的事件逻辑，并将数据存入组件识别的位置：

// 手动追加菜单项DOM
var $menu = $(".ui-autocomplete");
$menu.append('<li class="ui-menu-item"><div class="ui-menu-item-wrapper">加载更多</div></li>');

// 获取新追加的项
var $newItem = $menu.find(".ui-menu-item:last");
// 存入组件识别的数据格式：和Autocomplete的项结构一致
$newItem.data("ui-autocomplete-item", {
    label: "加载更多结果",
    value: $("#autocomplete").val(),
    isShowMore: true
});

// 绑定点击事件，触发组件的select逻辑
$newItem.on("click", function() {
    var item = $(this).data("ui-autocomplete-item");
    $("#autocomplete").autocomplete("option", "select").call(
        $("#autocomplete")[0], 
        null, 
        { item: item }
    );
});

// 更新组件内部的items集合，确保键盘操作能识别新项
var autocomplete = $("#autocomplete").data("ui-autocomplete");
autocomplete.items = $menu.find(".ui-menu-item").map(function() {
    return $(this).data("ui-autocomplete-item");
});

关键注意事项 #

• 尽量避免直接操作Autocomplete的DOM菜单，优先用组件提供的response、select等原生事件，兼容性和稳定性更好。
• 给加载更多项添加唯一标记（比如isShowMore），避免和普通项混淆，在select和focus事件中做特殊处理。
• 加载更多时要保持输入关键词一致，确保接口返回的是当前搜索词的更多结果。

内容的提问来源于stack exchange，提问作者g-ulrich