無法使用HTML設置未定義的jQuery UI自動完成的屬性'_renderItem'

Question

我正在使用以下代碼將我的jQuery UI自動完成項呈現為HTML。 這些項在自動完成控件中正確呈現，但我一直收到此javascript錯誤，無法移動它。

Firefox 無法轉換JavaScript參數

Chrome 無法設置未定義的屬性“_renderItem”

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
});

不知道為什么它會拋出這個錯誤，或者我必須做些什么才能超越它......任何幫助都表示贊賞。

Answer 1

由於我剛加入並且無法評論drcforbin上面的帖子，我想我必須添加自己的答案。

drcforbin是正確的，雖然它實際上是一個與OP有不同的問題。 由於剛剛發布的新版jQuery UI，現在有人來到這個線程可能正面臨這個問題。 某些與自動完成相關的命名約定在v1.9的jQuery UI中已棄用，並已在v1.10中完全刪除（請參閱http://jqueryui.com/upgrade-guide/1.10/#autocomplete ）。

然而，令人困惑的是，他們只提到了從item.autocomplete數據標記到ui-autocomplete-item的轉換 ，但自動完成數據標記也已重命名為ui-autocomplete 。 而且它更令人困惑，因為演示仍在使用舊語法（因而被破壞）。

以下是需要在自定義數據演示中的jQuery UI 1.10.0的_renderItem函數中進行更改的內容： http ： //jqueryui.com/autocomplete/#custom-data

原始代碼：

.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

固定代碼：

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

請注意自動填充和item.autocomplete的更改。 我已經證實這適用於我自己的項目。

Answer 2

我遇到了同樣的問題...似乎在更高版本中，它必須是.data("ui-autocomplete")而不是.data("autocomplete")

Answer 3

我知道我的回答遲到了，但是如果將來的人還沒有得到

.data( "ui-autocomplete-item", item )

工作然后嘗試這個insted

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,       
  create: function () {
   $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      return $('<li>')
        .append( "<a>" + item.value + ' | ' + item.label + "</a>" )
        .appendTo(ul);
    };
  }
 })
});

它對我有用，我遇到登錄funktion的問題..我無法登錄，因為它說

Uncaught TypeError: Cannot set property '_renderItem' of undefined

希望這確實有助於某人:)

/卡欣

Answer 4

我正在使用jquery 1.10.2，它使用：

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

Answer 5

現在，使用jQuery-2.0.0，它是新模塊的名稱，但替換了“。”。 （點）由“ - ”（短划線）：

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Answer 6

為任何偶然發現這篇文章的人發布信息。

如果您未將.autocomplete放入文檔就緒事件中，則此錯誤也會自行顯示。

以下代碼將失敗：

<script type="text/javascript">
    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
</script>

而下面的代碼將起作用：

<script type="text/javascript">
    $(function(){
        $('#msg-to').autocomplete({
            source:all_friends,
            select:function (event, ui) {               
                // set the id of the user to send a message to
                mail_message_to_id = ui.item.id;
            }

        }).data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>").html(item.label))
                .appendTo(ul);
        };
    });
</script>

Answer 7

根據您使用的jquery ui的版本，它將是“autocomplete”或“ui-autocomplete”，我對combobox插件進行了此更新以解決問題（~ln 78-85）

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
     autoComplete = input.data("autocomplete");

autoComplete._renderItem = function(ul, item) {

...