カスタムHTMLメニューを実装する際に、jQueryオートコンプリート「選択」機能を無効にする

Question

カスタムドロップダウンメニューでjQueryオートコンプリートを実装しようとしています。私はdata（）._ renderItemメソッド（コメントアウト）でメニューアイテムをカスタマイズすることができますが、これはメニュー "Select"機能を無効にします。 「ラベル」フィールドを使用してメニュー項目をカスタマイズしようとすると、「選択」機能は機能しますが、メニュー項目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の例では、あなたのイメージの周りにアンカータグを配置してみてください：ラベルは成功コール

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

の作業フィドルに割り当てられた後

Answer 2

ここにお読みください：http://www.devbridge.com/projects/autocomplete/jquery/ これは私がオートコンプリートを必要とするときに使用するものです。設定は本当に簡単です。 あなたのニーズに合わない場合は教えてください。 http://jsfiddle.net/naveen/yRwH7/

Answer 3

一つの簡単な回避策は、HTML Encode list using JavaScriptになります。 ...

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