jquery - Autocomplete not displaying image in mvc -

i using autocomplete image search text box in razor.i using following function use jquery autocomplete

   $(function () {             $("#small-searchterms").autocomplete({                 source: function (request, response) {                     $.ajax({                         url: '@url.action("searchtermautocomplete", "home")', type: "get",                         datatype: "json",                         data: { term: request.term },                         success: function (data) {                             response($.map(data, function (item) {                          return { name: item.name, id: item.id, value: '<img src="' + item.productpictureurl +'">' + ' '+item.label};                             }))                         }                     })                  },                 minlength: 3,                 select: function (event, ui) {                     var selecteditem = ui.item;                     alert(selecteditem.id);                  }             });            return false;       }); 

autocomplete working fine display names instead of image autocomplete showing image url.is there way display image? thnkx help.

you need use data('autocomplete')._renderitem, ,change to:

$("#small-searchterms").autocomplete({       source: function (request, response) {       $.ajax({            url: '@url.action("searchtermautocomplete", "home")', type: "get",            datatype: "json",            data: { term: request.term },            success: function (data) {               response($.map(data, function (item) {                  return {                       name: item.name,                       id: item.id,                       value: item.productpictureurl,                      label: item.label                  };                }))            }       })        },       minlength: 3,       select: function (event, ui) {            var selecteditem = ui.item;             alert(selecteditem.id);        }    }).data('autocomplete')._renderitem = function(ul, item) {        return $('<li>')             .data('item.autocomplete', item)             .append(item.label + '<img src="' + item.value + '" alt="" />')             .appendto(ul);   }; 

for example:: see custom render item implementation