jQuery UI - 格式化自動完成結果。添加圖像可能嗎？

Question

我們正在從bassistance.de autocomplete移動到jQuery UI自動完成。 我找不到jQuery UI版本的很多例子，文檔看起來有點稀疏。那可能就是我。

我想知道是否有人有一個示例/教程，解釋如何改變自動完成下拉的外觀和感覺。我的代碼如下：

$("#SearchInput").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "http://servername/index.pl", 
      dataType: "json", 
      data: { 
       term: request.term 
      }, 
      success: function(data) { 
       response($.map(data.items, function(item) { 
        return { 
         label: item.id + " - " + item.label, 
         value: item.id 
        } 
       })); 
      } 
     }); 
    }, 
}); 

這個工程，我得到的ID和標籤顯示由連字符分隔。 理想情況下，我想知道如何格式化結果的顯示方式。 我想要ID然後在標籤的ID下面。如果可能的話，我想知道如何在文本的右側顯示圖像。

如果任何人有任何關於如何實現這一目標的指針，我會很感激。

Answer 1

JqueryUI網站上有關於如何定製結果佈局的文檔： http://jqueryui.com/demos/autocomplete/#custom-data。

一些示例：

$("#SearchInput").autocomplete({ .... }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>") 
      .appendTo(ul); 
    };