[英]How to Show Image in Jquery-UI Autocomplete
i am using jquery-ui auto-complete and making a ajax call inside the auto-complete function i am calling my controller action which returns Json , every thing is working fine now i want to show image in suggestion drop down , i am also taking image URL in json how can i show image in suggestion drop down along with Name 我正在使用jquery-ui自动完成功能并在自动完成功能中进行ajax调用我正在调用返回Json的控制器操作,现在一切正常,我想在建议下拉列表中显示图像,我也正在json中的图片网址如何显示建议中的图片以及名称下拉列表
JavaScript 的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");
}
});
});
Action in Controller : 控制器中的动作:
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 : SearchJsonModel:
public class SearchJsonModel
{
public string Name { get; set; }
public string Value { get; set; }
public string LogoUrl { get; set; }
}
Please ask me if you need more detail and thanks in advance . 请问我是否需要更多细节,并提前致谢。
The documentation
illustrates an example of how you could customize the output: 该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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.