JQuery autocomplete UI image option

Question

Я использую пользовательский интерфейс автозаполнения JQuery с моим рельсовым приложением, и он работает очень хорошо. Я отправляю ниже JSON в свой index.js.erb, и оба значения и заголовок работают хорошо. Я нашел этот пример использования: img => "# (h {@ object.img_url})", но я не смог заставить его работать.

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

Должно ли это работать? или этот пример неверен. Если у вас есть какие-либо предложения о том, как получить изображение, я бы очень признателен. Ниже приведен код 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

Это был код, в котором я закончил использование - только немного изменился из предложения Шона выше.

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