如何在 Jquery-UI 自动完成中显示图像答案

【问题标题】：How to Show Image in Jquery-UI Autocomplete如何在 Jquery-UI 自动完成中显示图像
【发布时间】：2012-10-25 10:03:57
【问题描述】：

我正在使用 jquery-ui 自动完成并在自动完成功能中进行 ajax 调用我正在调用返回 Json 的控制器操作，现在一切正常我想在建议下拉列表中显示图像，我我也在 json 中获取图像 URL 如何在建议下拉列表中显示图像以及名称

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

如果您需要更多详细信息，请询问我，并提前致谢。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-ui jquery-ui-autocomplete

【解决方案1】：

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

【讨论】：