Różnica między autocomplete jQuery renderItem i renderItemData

Question

Próbuję zrozumieć różnicę między renderItem i renderItemData.

Nie mogłem znaleźć odpowiedniej dokumentacji na ten temat.

Mam następujący kod:

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

} 

Moim celem jest niestandardowy styl elementów menu li. Nie jestem pewien, gdzie idę źle.

Answer 1

renderItem buduje rzeczywisty element listy (<li>), który ma zostać dołączony do listy wynikowej

renderItemData jest tylko metoda otoki, który wywołuje renderItem i przechowuje powiązanych danych (etykieta i wartość) do utworzonego elementu. Dane te są później używane podczas nawigacji i wybierania oraz z pola sugestii.

Znajdziesz że kod źródłowy dla obu jest dość prosta:

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

I należy pamiętać, że _renderMenu faktycznie wzywa _renderItemData:

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