Jquery autocomplete images in the returned data

Question

I've gotten jquery autocomplete working on my site, and now I'm trying to get it to display an image from the data that I am pulling from my database.

However I've run into a problem as while it is pulling through my image data and product name, it's displaying the html as text in the autocomplete drop down.

Hopefully someone can see where I'm going wrong and point me in the right direction!

$(document).ready(function() {
$(function() {
    $( "#autocomplete" ).autocomplete({
        source: function(request, response) {
            $.ajax({ url: "<?php echo site_url('homepage_products/suggestions'); ?>",
            data: { term: $("#autocomplete").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
                var data_to_return = new Array();
                for (var i = 0; i < data.length; ++i) {
                    data_to_return.push("<li><a>" + "<img src='" + data[i].image + "' />" + data[i].prodid+ " - " + data[i].product_name+ "</a></li>");
                }
                response(data_to_return);

            }
        });
    },
    minLength: 4
    });
});

});

Thanks!

-------------EDIT-------------

Ok after the suggestion of Spokey I've now altered my code as follows and I've managed to get my results to display in html rather than just text:

$(function() {
    $( "#autocomplete" ).autocomplete({
        source: function(request, response) {
            $.ajax({ url: "<?php echo site_url('homepage_products/suggestions'); ?>",
            data: { term: $("#autocomplete").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
                var data_to_return = new Array();
                for (var i = 0; i < data.length; ++i) {
                    data_to_return.push("<li><a href = '/shop/products/id/" + (data[i].image).toLowerCase() +  ".htm'>" + "<img src='/shop/images/product_thumbs/" + (data[i].image).toLowerCase() + ".jpg' />" + data[i].id + " - " + data[i].name+ "</a></li>");
                }
                response(data_to_return);
            }
        });
    },
    select: function( event, ui ) { 
        alert(ui.item.value);
        window.location.href = ui.item.value;
    },
    minLength: 2
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.image + "</a>")
        .appendTo(ul);
    };
});

However now I'm not getting any specific javascript errors, but the images aren't appearing. I've tried absolute paths, and I've checked that they do exist on the server - but all I get is a grey box when I roll my mouse over where the image should be appearing on the drop down list.

Hopefully someone can spot my mistake!

I also found this for links which I found quite useful and thought I'd recommend for anyone else trying to achieve something similar:

JQuery Autocomplete Where the Results are Links

-------------FINAL FIX-------------

Oops - it was me being an idiot in the end - I was calling

item.image

When I should have been calling

item.label

Thanks for the help!