jQuery स्वत: पूर्ण रेंडर के बीच अंतर Item और 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 वास्तविक सूची आइटम (<li>) है कि परिणाम सूची

renderItemData के साथ जोड़ दिया जा करने के लिए बनाता है सिर्फ एक आवरण विधि है कि renderItem कॉल करता है और बनाया तत्व को संबद्ध डेटा (लेबल और मूल्य) संग्रहीत करता है। इस डेटा को बाद में उपयोग किया जाता है जब सुझाव बॉक्स से नेविगेट और चयन और विकल्प।

आप पाएंगे कि दोनों के लिए स्रोत कोड बहुत सरल है:

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