使用_renderItem和类别进行jQuery自动完成

作为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 = "" + "
" + "
" + '' + "
" + "
" + "
" + item.value + "
" + "
" + item.info + "
" + "
" + "
" + ""; return $("
").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("
" + item.category + "
"); 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("
" + item.category + "
"); 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 = "" + "
" + "
" + '' + "
" + "
" + "
" + item.value + "
" + "
" + item.info + "
" + "
" + "
" + ""; return $("
").data("item.autocomplete", item).append(MyHtml).appendTo(ul); }; }); 

Answer 2

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

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

Answer 3

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

这是我修复它的方式：

 $.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("
" + item.category + "
"); currentCategory = item.category; } li = that._renderItemData(ul, item); li.removeClass().addClass("search-result section-item"); li.text(''); li.append('
' + item.label + ''); if (item.category) { li.attr("aria-label", item.category + " : " + item.label); } }); } }); 

如你所见，我永远不会调用_renderItem

你可以在这里看到jsfiddle的完整演示点击