Unterschied zwischen jQuery Autocomplete renderItem und renderItemData

Question

Ich versuche, den Unterschied zwischen renderItem und renderItemData zu verstehen.

Ich konnte keine relevante Dokumentation zu diesem Thema finden.

Ich habe folgenden Code:

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

} 

Mein Ziel ist es, individuelle Arteinzelteile Menü li. Ich bin mir nicht sicher, wo ich falsch liege.

Answer 1

renderItem baut die tatsächliche Listenelement (<li>), die

renderItemData in die Ergebnisliste angehängt werden soll, ist nur ein Wrapper-Methode, die renderItem und speichert die zugeordneten Daten (Label und Wert) auf das erzeugte Element aufruft. Diese Daten werden später beim Navigieren und Auswählen und bei der Auswahl aus dem Vorschlagsfeld verwendet.

Sie finden, dass der Quellcode für beide ziemlich einfach:

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

Und Sie sollten beachten, dass _renderMenu tatsächlich fordert _renderItemData:

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