如何忽略为分组添加的项目

Question

我创建了 jQuery 自动完成功能。返回的数据属于多个类别，因此我想添加分组。每当找到新组时，我都会添加组名，因为我的数据已排序。我在 _renderMenu() 方法中执行此操作。它显示正常，但添加的元素表现得像普通项目，所以它们有我不想要的焦点和选择事件。我如何说服自动完成它会忽略所有具有“ui-autocomplete-category”类的元素？

$("#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 (!ui.item) {
                return false;
            }
            event.preventDefault();
        },
        delay: 400,
        select: function (event, ui) {
            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) {
                ul.append("<li class='ui-autocomplete-category'>" + item.categoryName + "</li>");
                console.log(item);
                currentEntity = itemEntity;
            }

            that._renderItemData(ul, item);
        });
    }

Answer 1

想通了，不得不添加这段代码：

create: function (event, ui) {
      $(this).data('ui-autocomplete').menu.options.items = "> :not(.ui-autocomplete-category)";
}

因此，自动完成现在会忽略该类的所有元素