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)";
}

因此，自动完成功能现在将忽略此类中的所有元素

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

1 个答案: