自動完成不是我使用自動完成與圖像搜索中razor.I文本框中MVC

Question

顯示圖像我用下面的函數使用jquery自動完成

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

自動完成功能工作正常顯示的名字，而是像自動完成的正在顯示圖片url.Is有什麼方法可以顯示圖片嗎？ Thnkx尋求幫助。

Answer 1

你需要使用data('autocomplete')._renderItem一樣，更改爲：

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

例如::見custom render item implementation