Sự khác biệt giữa hàm renderItem của jQuery tự động hoàn thành và renderItemData

Question

Tôi đang cố gắng hiểu sự khác biệt giữa renderItem và renderItemData.

Tôi không thể tìm thấy tài liệu liên quan về điều này.

tôi có mã sau đây:

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

} 

Mục tiêu của tôi là để phong cách tùy chỉnh các mục menu li. Tôi không chắc mình đang đi sai đâu.

Answer 1

renderItem xây dựng các mục trong danh sách thực tế (<li>) mà là để được nối thêm vào danh sách kết quả

renderItemData chỉ là một phương pháp wrapper mà các cuộc gọi renderItem và lưu trữ các dữ liệu liên quan (nhãn và giá trị) để các yếu tố tạo ra. Dữ liệu này sau đó được sử dụng khi điều hướng và chọn và tùy chọn từ hộp đề xuất.

Bạn sẽ thấy rằng các mã nguồn cho cả hai là khá đơn giản:

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

Và bạn nên lưu ý rằng _renderMenu thực sự kêu gọi _renderItemData:

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