如何覆蓋jquery自動完成的菜單項？

旁邊的標籤和值，我想顯示一張圖片。我將必要的數據作爲json發送給java腳本。但我不知道如何覆蓋自動生成的菜單項目以向其添加<img src=pic_url />。

$("#search").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/search/" + request.term, 
        type: 'POST', 
        dataType: "json", 
        success: function (data) { 
         response($.map(data.username, function (item) { 
          return { 
           label: item.name, 
           value: item.id, 
           pic_url: item.pic_url 
          }; 
         })); 
        }, 
        error: function (data) { 
         console.log('e', arguments); 
        } 
       }); 
      ...

有什麼建議嗎？

來源

2013-08-16 Houman

您可以通過重寫_renderItem方法做到這一點：

$("#search").autocomplete({..}).data("autocomplete")._renderItem = function (ul, item) { 
      var html = '<a><div class="list_item_container"><img src="' + item.picture + '" /><span>' + item.label + '</span></div></a>'; 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append(html) 
       .appendTo(ul); 
     };

來源

2013-08-16 11:01:53 alexn

+1，完美的例子。謝謝 – Houman