在jquery自動完成中重寫_rendermenu拋出js錯誤

Question

我試圖在jquery自動完成中重寫_rendermenu。是如何產生的名單，但每一次我將鼠標懸停在結果我碰到下面的JS錯誤

遺漏的類型錯誤：無法讀取屬性在jQuery的ui.js的未定義的「價值」

使用的代碼是

$(function() { 
var availableTags = [ 
       "ActionScript", 
       "AppleScript", 
       "Asp", 
       "BASIC", 
       "C", 
       "C++", 
       "Clojure", 
       "COBOL", 
       "ColdFusion", 
       "Erlang", 
       "Fortran", 
       "Groovy", 
       "Haskell", 
       "Java", 
       "JavaScript", 
       "Lisp", 
       "Perl", 
       "PHP", 
       "Python", 
       "Ruby", 
       "Scala", 
       "Scheme", 
       "AA", 
       "BB", 
       "CC", 
       "DD", 
       "EE", 
       "FF", 
       "GG", 
       "HH", 
       "II", 
       "JJ", 
       "KK" 
      ]; 


    var atComplete=$("#autoCompleteText").autocomplete({ 
     delay:0, 
     source:availableTags, 
      autoFocus: true, 
      minLength: 0, 
      appendTo: "#result"   
}).focus(function() { 
       $(this).autocomplete("search"); 
}).data('ui-autocomplete'); 
    atComplete._renderMenu = function(ul, items) { 
      var that = this; 
      $.each(items, function(index, item) { 
        that._renderItem(ul, item); 
      }); 
    }; 

    atComplete._renderItem = function(ul, item) { 
     console.log("item in render item:",item); 
      return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul); 
    }; 
}); 

Answer 1

如果你看一下API docs for _renderMenu你會看到的原因你得到一個錯誤：

Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.

您使用renderItem()直接。這意味着你實際上並沒有將項目數據綁定到緩存中，在繪製菜單時小部件會嘗試讀取 - 但由於它沒有定義，所以頁面會引發錯誤。

要解決這一切，你需要做的是改變調用_renderItem調用_renderItemData代替：

atComplete._renderMenu = function(ul, items) { 
     var that = this; 
     $.each(items, function(index, item) { 
       that._renderItemData(ul, item); 
     }); 
};