Jquery autocomplete UI image option

I am using the JQuery Autocomplete UI with my ra开发者_运维技巧ils app and it is working really well. I am sending the below JSON in my index.js.erb and both the value and title are working well. I found this example of using :img => "#(h{@object.img_url})" , but I have not been able to get it to work.

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

Should this be working? or is this example not correct. If you have any suggestions on how to get the image to show up, I would really appreciate it. Below is the JS code I am using in my application.js

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

Thanks! James

You can try and change the _renderItem private function to render the list in the way that you want. Something like the following perhaps:

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

I believe that is fairly similar to the example here. Hopefully that helps.

this was the code i ended up using - just modified a little from Shaun's suggestion above.

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