javascript - 带有 _renderItem 和类别的 jQuery 自动完成

Question

作为 jQuery 的新手，我想知道是否有可能让 jQuery _renderItem(用于自定义列表项 HTML/CSS)和类别和谐地协同工作。

我的 _renderItem 运行良好，但我不知道如何将类别合并到组合中。

到目前为止我的代码:

$(document).ready(function () {
$(':input[data-autocomplete]').each(function () {
    $(':input[data-autocomplete]').autocomplete({
        source: $(this).attr("data-autocomplete")
    }).data("autocomplete")._renderItem = function (ul, item) {
        var MyHtml = "<a>" + "<div class='ac' >" +                        
                     "<div class='ac_img_wrap' >" +
                     '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                     "</div>" +
                     "<div class='ac_mid' >" +
                     "<div class='ac_name' >" + item.value + "</div>" +
                     "<div class='ac_info' >" + item.info + "</div>" +
                     "</div>" +
                     "</div>" + "</a>";
        return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
    };
});
});

自动完成的 jQuery 文档给出了以下代码示例:

$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
    var self = this,
            currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
            currentCategory = item.category;
        }
        self._renderItem(ul, item);
    });
}
});

我想让我的自定义 HTML _renderItem 和类别一起工作，任何人都可以帮助我将这两个合并在一起或指出正确的方向吗？

Answer 1

周一早上的忧郁症已经解除，我现在可以看得很清楚了，这里是给任何正在看的人的答案:

$(document).ready(function () {

$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
    var self = this,
        currentCategory = "";
    $.each(items, function (index, item) {
        if (item.category != currentCategory) {
            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
            currentCategory = item.category;
        }
        self._renderItem(ul, item);
    });
}
});

$(':input[data-autocomplete]').catcomplete({
source: $(':input[data-autocomplete]').attr("data-autocomplete")
}).data("catcomplete")._renderItem = function (ul, item) {
var MyHtml = "<a>" + "<div class='ac' >" +
                 "<div class='ac_img_wrap' >" +
                 '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                 "</div>" +
                 "<div class='ac_mid' >" +
                 "<div class='ac_name' >" + item.value + "</div>" +
                 "<div class='ac_info' >" + item.info + "</div>" +
                 "</div>" +
                 "</div>" + "</a>";
return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
};

});