jquery - 自动完成不在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。有什么方法可以显示图像吗？感谢您的帮助。

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

例如:: 见自定义渲染项实现