Jquery Autocomplete UI-Bildoption

Question

Ich verwende die JQuery Autocomplete-Benutzeroberfläche mit meiner Rails-App und es funktioniert wirklich gut. Ich sende den folgenden JSON in meinem index.js.erb und sowohl der Wert als auch der Titel funktionieren gut. Ich habe dieses Beispiel gefunden: img => "# (h {@ object.img_url})", aber ich konnte es nicht zum Laufen bringen.

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

Sollte das funktionieren? oder ist dieses Beispiel nicht korrekt? Wenn Sie Vorschläge haben, wie Sie das Bild zeigen können, würde ich es sehr schätzen. Unten ist der JS-Code, den ich in meiner Anwendung verwende.js

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

Danke! James

Answer 1

Sie können versuchen, die private Funktion _renderItem zu ändern, um die Liste so darzustellen, wie Sie möchten. So etwas wie die folgenden vielleicht:

$(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); 
    } 
}) 

Ich glaube, dass zum Beispiel ziemlich ähnlich ist here. Hoffentlich hilft das.

Answer 2

Dies war der Code, den ich verwendet habe - nur etwas von Shauns Vorschlag oben geändert.

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