javascript - Jquery autocomplete images in the returned data -

i've gotten jquery autocomplete working on site, , i'm trying display image data pulling database.

however i've run problem while pulling through image data , product name, it's displaying html text in autocomplete drop down.

hopefully can see i'm going wrong , point me in 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();                 (var = 0; < 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 suggestion of spokey i've altered code follows , i've managed results display in html rather 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();                 (var = 0; < 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 i'm not getting specific javascript errors, images aren't appearing. i've tried absolute paths, , i've checked exist on server - grey box when roll mouse on image should appearing on drop down list.

hopefully can spot mistake!

i found links found quite useful , thought i'd recommend else trying achieve similar:

jquery autocomplete results links

-------------final fix-------------

oops - me being idiot in end - calling

item.image 

when should have been calling

item.label 

thanks help!