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

Question

我正在使用以下代碼將我的jQuery UI自動完成項目呈現爲HTML。 項目在自動完成控件中正確呈現，但我不斷收到此javascript錯誤，無法移過它。

火狐無法轉換JavaScript參數

鉻無法設置未定義

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

不確定的特性「_renderItem」爲什麼它是引發此錯誤，或者我必須做什麼通過它...任何幫助表示讚賞。

Answer 1

因爲我剛剛加入並不能drcforbin的帖子評論上面，我想我必須添加我自己的答案。

drcforbin是正確的，雖然它是一個真正與OP不同的問題。由於剛剛發佈的新版jQuery UI，現在任何人都可能面臨此問題。有關自動完成一定的命名約定在jQuery用戶界面被棄用V1.9，並在1.10被完全刪除（見http://jqueryui.com/upgrade-guide/1.10/#autocomplete）。

什麼是混亂的，但問題在於，他們只提從item.autocomplete數據標籤UI的自動完成項目過渡，但自動完成數據標籤也被改名爲用戶界面 - 自動完成。而且它更令人困惑，因爲演示仍在使用舊的語法（因此被破壞）。

下面是什麼需要在自定義數據的_renderItem功能jQuery UI的1.10.0演示此處更改：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.autoco完整。我已經證實，這在我自己的項目中起作用。

Answer 2

我碰到了同樣的問題...似乎在以後的版本中，它必須是.data("ui-autocomplete")代替.data("autocomplete")

Answer 3

根據jQuery UI的版本你使用它要麼是「自動完成」或「UI-自動完成」，我做了這個更新的組合框插件來解決這個問題（LN〜78-85）

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

autoComplete._renderItem = function(ul, item) { 

...

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，這是你的新模塊的名稱，但替換「。」。 （dot）by「 - 」（破折號）：

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

我知道我有我的回答來晚了，但如果人們對未來仍然不得到

 
.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 

希望這不會幫助別人:)

/卡欣