如何在JQuery UI中自動完成顯示圖像

我正在使用jquery-ui自動完成並在自動完成功能內進行ajax調用我打電話給我的控制器操作返回Json，現在每件事情都很好，現在我想要顯示在建議的圖像降了下來，我也學圖片網址JSON我怎麼能顯示出建議的圖像下拉以及名稱如何在JQuery UI中自動完成顯示圖像

的JavaScript控制器

function log(message) { 
      $("<div>").text(message).prependTo("#log"); 
      $("#log").scrollTop(0); 
     } 

     $("#search").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Home/GetCompanyNames", 
        dataType: "jsonp", 
        data: "searchterm=" + request.term, 
        success: function (data) { 
         response($.map(data, function (item) { 
          alert(item.Value); 
          return { 
           label: item.Name, 
           value: item.Name 
          }; 
         })); 
        } 
       }); 
      }, 
      minLength: 2, 
      select: function (event, ui) { 
       alert(ui.item.Name); 
      alert(ui.item.Value); 
      alert(ui.item.LogoUrl); 
      }, 
      open: function() { 
       $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
      }, 
      close: function() { 
       $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
      } 
     }); 

    });

操作：

public JsonResult GetCompanyNames (string searchterm) 
    { 
     var companies = context.companyService.Query().Where(x => x.Name.Contains(searchterm)).ToList(); 
     var list = companies.Select(item => new SearchJsonModel 
               { 
                LogoUrl = item.Logo != null || item.Logo != "" ? "<img src='/Upload/" + item.Logo + "' />" : "<img src='/home/image?image=" + item.Name + "' />", Name = item.Name, Value = item.InternetName 
               }).Select(model => (model)).ToList(); 
     return Json(list, JsonRequestBehavior.AllowGet); 
    }

SearchJsonModel：

public class SearchJsonModel 
{ 
    public string Name { get; set; } 
    public string Value { get; set; } 
    public string LogoUrl { get; set; } 
}

請問我，如果你需要提前更多的細節和感謝。

來源

2012-10-25 smart boy

的documentation說明的你怎麼可以自定義輸出的例子：

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: '/Home/GetCompanyNames', 
      data: { searchterm: request.term }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { 
         label: item.Name, 
         value: item.Name, 
         logoUrl: item.LogoUrl 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 2, 
    select: function (event, ui) { 

    }, 
    open: function() { 
     $(this).removeClass('ui-corner-all').addClass('ui-corner-top'); 
    }, 
    close: function() { 
     $(this).removeClass('ui-corner-top').addClass('ui-corner-all'); 
    } 
}) 
.data('autocomplete')._renderItem = function(ul, item) { 
    return $('<li>') 
     .data('item.autocomplete', item) 
     .append(item.label + '<img src="' + item.logoUrl + '" alt="" />') 
     .appendTo(ul); 
};

來源

2012-10-25 10:16:17

如何在JQuery UI中自動完成顯示圖像

回答

相關問題