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

});

Answer 2

有同样的问题。对我来说，在我以下列方式添加renderItem之后，它就起作用了：

searchBox.data("custom-catcomplete")._renderItem = function(ul, item) {
                return $("<li></li>").data("item.autocomplete", item)
                    .append("<a>" + item.url + "</a>")
                    .appendTo(ul);
            };

Answer 3

我一直有这个错误：无法设置属性＆＃39; _renderitem＆＃39;未定义的

这是我修复它的方式：

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        li.removeClass().addClass("search-result section-item");
        li.text('');
        li.append('<a class="ui-corner-all"><div class="display">' + item.label + '</div></a>');
        if (item.category) {
            li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });

正如您所见，我从不打电话给 _renderItem

您可以看到完整的演示click here for jsfiddle

使用_renderItem和类别的jQuery自动完成

3 个答案: