JqueryオートコンプリートUIイメージオプション

Question

私はJQueryオートコンプリートUIをレールアプリで使用していますが、実際にはうまくいきます。私はindex.js.erbに以下のJSONを送ります。値とタイトルはうまくいきます。 img => "＃（h {@ object.img_url}）"という使用例が見つかりましたが、動作させることができませんでした。

[{"value":"Moby Dick","img":"http://ecx.images-amazon.com/images/I/517TZoo2JL._SL75_.jpg","label":"Moby Dick"}] 

これは機能しますか？またはこの例は正しくありません。画像を表示する方法についてご意見がありましたら、本当にありがとうございます。以下は私のapplication.jsで使用しているJSコードです

$(document).ready(function(){ 
$(".auto_search_complete").autocomplete({ 
     dataType: "json", 
     source: '/books.js', 
     minLength: 3 
    }) 
}) 

ありがとう！ James

Answer 1

_renderItemプライベート関数を変更して、必要な方法でリストをレンダリングできます。おそらく、次のような何か：

$(document).ready(function(){ 
    $(".auto_search_complete").autocomplete({   
     dataType: "json",   
     source: '/books.js',   
     minLength: 3  
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" +"<img src='" + item.img + "'>" + item.label + "</a>") 
      .appendTo(container); 
    } 
}) 

私は例hereにかなり似ていると信じています。うまくいけば助けてくれます。

Answer 2

これは私が使い終わったコードでした。上記のShaunの提案からちょっと修正しました。

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