如何覆盖jquery自动完成的菜单项？

Question

我正在使用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); 
        } 
       }); 
      ... 

有什么建议吗？

Answer 1

您可以通过重写_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); 
     }; 

Answer 2

你要开始研究自动完成的._renderItem方法。它为您提供了更多的widget的灵活性。

Here is a nice complex use of the method

Answer 3

jQuery Autocomplete - Custom data and display

您可以更改_renderItem方法中的模板......请参见在示例中，脚本标签的底部。