jQueryオートコンプリートのrenderItemとrenderItemDataの相違

Question

renderItemとrenderItemDataの違いを理解しようとしています。

これに関する関連ドキュメントが見つかりませんでした。

は、私は次のコードを持っている：

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
    var that = this, 
    currentCategory = ""; 
    $.each(items, function(index, item) { 
     if (item.category != currentCategory) { 
     ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
     currentCategory = item.category; 
     } 
     // with following code, when an element is selected 
     // in menu list, the corresponding value appears in searchbox 
     that._renderItemData(ul, item); 
     // with following code, when an element is selected 
     // in menu list, the corresponding value does NOT appear in searchbox 
     // I override renderItem below 
     **// that._renderItem(ul, item);** 

    }); 
    } 
}); 

function handleSearchBox() { 

    var data = [ 
    { label: "JAMES", category: "PEOPLE" }, 
    ]; 

    $("#search").catcomplete({ 
    delay: 0, 
    source: data, 
    select: function(event, ui) { 
     event.preventDefault(); 
     str = JSON.stringify(ui) 
     // with renderItemData, str = item in source data 
     // with renderItem str = {} 
     alert(str) 
     var selectedObj = ui.item.label 
     $("#search").val(selectedObj); 
    } 
    }); 
$("#search").data("custom-catcomplete")._renderItem = function(ul, item) { 
       return $("<li></li>").data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

} 

私の目標は、カスタムスタイルメニュー李項目にあります。私はどこに間違っているのか分からない。

Answer 1

renderItemは

renderItemDataがrenderItemを呼び出して作成された要素に関連するデータ（ラベルと値）を格納するだけのラッパー方法で結果リストに追加される実際のリスト項目（<li>）を構築します。このデータは後でナビゲートして選択し、提案​​ボックスからオプションを選択するときに使用されます。

あなたは、両方のソースコードは非常に単純であることがわかります：

_renderItemData: function(ul, item) { 
    return this._renderItem(ul, item).data("ui-autocomplete-item", item); 
}, 

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

そして、あなたは_renderMenuが実際_renderItemDataに呼び出すことに注意してください。

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