JQueryUI 1.10.0 Autocompleter renderItem 问题答案

【问题标题】：JQueryUI 1.10.0 Autocompleter renderItem problemsJQueryUI 1.10.0 Autocompleter renderItem 问题
【发布时间】：2013-01-22 15:14:05
【问题描述】：

我尝试了将“自动完成”重命名为“ui-autocomplete”的解决方案（使用 JQueryUI 1.10.0、JQuery 1.8.3），但仍然收到以下错误：

TypeError: $(...).autocomplete(...).data(...) 未定义

} }).data('ui-autocomplete')._renderItem = function (ul, item) {

它在 1.10.0 中定义，但我需要重写：

_renderItem: function( ul, item ) {
return $( "<li>" )
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
},

这是我的全部代码：

var ajaxCall_QuickSearchCompanyId;
            $('#QuickSearchCompanyId').autocomplete({
                minLength: 2, delay: 300, source: function (request, response) {
                    if (ajaxCall_QuickSearchCompanyId) {
                        ajaxCall_QuickSearchCompanyId.abort();
                    }
                    ajaxCall_QuickSearchCompanyId = $.ajax({
                        url: '/Advertiser/Autocompleter/CompaniesDetailed', dataType: 'json',
                        data: { q: request.term },
                        success:
                            function (data) {
                                $('#QuickSearchCompanyId').removeClass('ui-autocomplete-loading');
                                response($.map(data, function (item) {
                                    return {
                                        label: item.ID,
                                        value: item.Name,
                                        subsidiaries: item.Subsidiaries,
                                        category: item.Category,
                                        url: (item.URL == null) ? '' : item.URL,
                                        parentName: item.ParentName,
                                        isReported: item.IsReported
                                    }
                                }));
                            }
                    });
                }
            }).data('ui-autocomplete')._renderItem = function (ul, item) {
                String.prototype.chunk = function (n) {
                    var ret = []; for (var i = 0, len = this.length; i < len; i += n) { ret.push(this.substr(i, n)); }
                    return ret;
                }; ul.attr('id', 'ul_QuickSearchCompanyId'); return $('<li></li>')
                    .data('ui-autocomplete-item', item)
                    .append("<a style='padding: 0px;'><div style='margin-bottom: 0px; width: 450px;'><table style='height: 100%; width: 450px; font-family: Calibri; font-size: 10pt;'><tr><td style='width: 280px; border-right: solid 1px Black; padding: 0px; color: " + ((item.isReported != true) ? 'Gray' : 'Black') + "; font-style: " + ((item.isReported != true) ? 'italic' : 'none') + ";'>" + ((item.parentName != '[[root]]') ? (item.parentName + ': ') : '') + item.value + "</td><td align='right' valign='top' style='width: 150px; padding: 0px; color: " + ((item.isReported != true) ? 'Gray' : 'Black') + "; font-style: " + ((item.isReported != true) ? 'italic' : 'none') + ";'>" + item.category + "<br /></td></tr></table></div></a>")
                    .appendTo(ul);
            };

任何想法都会得到极大的赞赏。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

我找到了解决办法！

好吧，我来分享一下我的小经验。当我遇到同样的问题时，我听到人们谈论将“ui-autocomplete”更改为“uiAutocomplete”或只是“autocomplete”，但这是错误的。

正确的是真的“ui-autocomplete”，这个问题的解决方法不是这个。当我从以下位置更改代码时，我解决了我的问题：

    .data('ui-autocomplete')._renderItem = function (ul, item)

收件人：

    .__renderItem = function(ul, item)

尝试这样做并告诉我发生了什么。

【讨论】：

为什么要投反对票？这对我有用，我为此浪费了时间分享知识？为什么你在没有给我反馈的情况下投了反对票？
谢谢！我使用 ui-autocomplete 而不是 autocomplete 这对我有用

【解决方案2】：

代替

$('selector').data('ui-autocomplete')._renderItem = function (ul, item) { };

你应该使用

$('selector').data('uiAutocomplete')._renderItem = function (ul, item) { };

【讨论】：

刚刚试了一下，还是不行：TypeError: $(...).autocomplete(...).data(...) is undefined [Break On This Error]}).data('uiAutocomplete')._renderItem = function (ul, item) {
@user1214620：这应该可以工作：jsfiddle.net/XsskB/1。你确定你使用的是 1.10 吗？
你拯救了我的一天！效果很好，我只需要在我的 css 中添加一点 zIndex，因为自动完成列表显示在某些元素下

【解决方案3】：

我遇到了同样的问题。你应该使用$('selector').data('autocomplete')._renderItem = function (ul, item) {...};

或者只是打开控制台并输入如下内容：$('div').autocomplete().data()

在那里你会看到你必须使用的方法。就我而言，它只是“自动完成”

【讨论】：

您在控制台中运行 JS 的建议是个好主意。帮我解决了问题。

【解决方案4】：

我对这条线也有同样的问题

.data("autocomplete")._renderItem = function (ul, item) {

我可以通过添加任何这些来克服错误

1 - .data('ui-autocomplete')._renderItem = function (ul, item) { 
2 - .data('uiAutocomplete')._renderItem = function (ul, item) { 
3 - .__renderItem = function(ul, item) {

【讨论】：