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

Posted 2023-05-08

【中文标题】如何忽略为分组添加的项目

【英文标题】：How to ignore items added for grouping

【发布时间】：2019-11-19 02:03:37

【问题描述】：

我创建了 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);
        );
    

【参考方案1】：

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

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

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