如何让jQuery autocomplete忽略分组用的ui-autocomplete-category元素

我之前也遇到过这个问题！核心原因是你添加的分组<li>和普通选项一样，会被jQuery UI Autocomplete的事件系统捕获——它默认会监听整个菜单内的所有<li>元素。这里有两个关键修改点能彻底解决这个问题：

1. 渲染分组时阻止默认交互事件 #

在创建分组标题的<li>元素时，直接给它绑定mousedown和focus事件，阻止默认行为，这样点击或聚焦到分组标题时就不会触发Autocomplete的默认逻辑：

$("#searchInput").autocomplete().data("autocomplete")._renderMenu = function (ul, items) {
    var that = this;
    var currentEntity = "";
    $.each(items, function (index, item) {
        var itemEntity = item.value.split(",")[1];
        if (currentEntity !== itemEntity) {
            // 修改这里：给分组li添加事件阻止
            $("<li class='ui-autocomplete-category'>" + item.categoryName + "</li>")
                .on('mousedown focus', function(e) {
                    e.preventDefault(); // 阻止点击和焦点触发默认行为
                })
                .appendTo(ul);
            currentEntity = itemEntity;
        }
        that._renderItemData(ul, item);
    });
}

2. 在focus/select回调中过滤分组元素 #

保险起见，我们还可以在Autocomplete的focus和select回调里增加判断：如果触发事件的元素是分组标题（或它的子元素），直接返回false，不执行后续逻辑：

$("#searchInput").autocomplete({
    // ... 其他配置 ...
    focus: function (event, ui) {
        // 检查当前目标是否属于分组元素
        if ($(event.target).closest('.ui-autocomplete-category').length) {
            return false;
        }
        if (!ui.item) {
            return false;
        }
        event.preventDefault();
    },
    select: function (event, ui) {
        // 同样检查分组元素
        if ($(event.target).closest('.ui-autocomplete-category').length) {
            return false;
        }
        if (!ui.item) {
            return false;
        }
        // do something
    }
})

完整修改后的代码 #

把以上修改整合到你的代码里，最终版本如下：

$("#searchInput").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetSearchData", "Account", new {Area = ""})',
            dataType: "json",
            data: { searchString: $("#searchInput").val() },
            success: function (data) {
                response($.map(data, function (item) {
                    console.log(item);
                    return {
                        label: item.DisplayName,
                        value: item.EntityInstanceId + "," + item.EntityId,
                        categoryName: item.EntityDisplayName
                    };
                }));
            },
            error: function (xhr, status, error) {
                console.log("Error");
            }
        })
    },
    focus: function (event, ui) {
        // 过滤分组元素
        if ($(event.target).closest('.ui-autocomplete-category').length) {
            return false;
        }
        if (!ui.item) {
            return false;
        }
        event.preventDefault();
    },
    delay: 400,
    select: function (event, ui) {
        // 过滤分组元素
        if ($(event.target).closest('.ui-autocomplete-category').length) {
            return false;
        }
        if (!ui.item) {
            return false;
        }
        // do something
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li style='margin-left: 8px; margin-right: 8px; margin-bottom: 3px;'></li>")
        .data("item.autocomplete", item)
        .append("<a style='color: #3e9645; font-family: Segoe UI;'>" + item.label + "</a>").appendTo(ul);
};

$("#searchInput").autocomplete().data("autocomplete")._renderMenu = function (ul, items) {
    var that = this;
    var currentEntity = "";
    $.each(items, function (index, item) {
        var itemEntity = item.value.split(",")[1];
        if (currentEntity !== itemEntity) {
            // 绑定阻止事件的分组li
            $("<li class='ui-autocomplete-category'>" + item.categoryName + "</li>")
                .on('mousedown focus', function(e) {
                    e.preventDefault();
                })
                .appendTo(ul);
            currentEntity = itemEntity;
        }
        that._renderItemData(ul, item);
    });
}

这样修改后，分组标题就只会作为静态展示，不会触发任何Autocomplete的焦点或选择事件了。

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