Параметр изображения автозаполнения Jquery

Question

Я использую интерфейс автозаполнения JQuery с моим приложением rails, и он работает очень хорошо. Я отправляю приведенный ниже 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
   })
 })

Спасибо! Джеймс

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

Я считаю, что это довольно похоже на пример здесь . Надеюсь, это поможет.

Answer 2

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

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