在实现自定义HTML菜单时丢失jQuery自动完成功能“选择”功能

Question

我正在尝试使用自定义下拉菜单实现jQuery自动完成功能。我可以使用data（）._ renderItem方法（注释掉）自定义菜单项，但是这会禁用菜单“选择”功能。如果我尝试通过“标签”字段自定义菜单项“选择”功能可以工作，但我的菜单项HTML被解释为字符串。任何人都可以提出一个干净的方式来完成这一点。

$("input#selectedInput") 

.bind("autocompleteselect", function (event, ui) { 
alert("Sel item " + JSON.stringify(ui.item.json)); 
}) 



.autocomplete({ 
appendTo: "#list", 
source: function (request, response) { 
    //alert("success"); 
    $.ajax({ 
     //url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack", 
     url: "Example REST URL", 
     dataType: "jsonp", 
     data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 12, 
      name_startsWith: request.term 
     }, 

     success: function (data) { 
      response($.map(data.results, function (item) { 
       itunesJson = item; 
       return { 
        label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>", 
       } 
      })); 
     }, 
    }); 
} 
}) 
/* 
     .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<img src='"+item.value+"' alt='no photo'/>"+ item.label) 
      .appendTo(ul); 
    }; 
     */ 

Answer 1

尝试在返回HTML如将图像周围的锚标记。 ...

.data("autocomplete")._renderItem = function(ul, item) { 
return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a><img src='"+item.value+"' alt='no photo'/></a>"+ item.label) 
     .appendTo(ul); 

Answer 2

试着在这里读：http://www.devbridge.com/projects/autocomplete/jquery/。 这是我需要自动完成时使用的。配置非常简单。 请告诉我，如果它不符合您的需求。

Answer 3

一个简单的解决方法将是HTML Encode list using JavaScript标签已分配成功的呼叫

var elm = $("#list"); 
elm.html(elm.text()); 

工作拨弄后：http://jsfiddle.net/naveen/yRwH7/