我的jQuery自动完成看起来像这样......
如果我发表console.log
声明,我可以看到每个列表项实际上都有我想要的键/值对,但无论出于何种原因它都无法正常显示。我使用Ajax调用来填充列表,这是代码的样子
控制器
public JsonResult GetDistributorInfo(string term)
{
var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(term))
select new
{
Key = c.ID,
Value = c.BankName
};
return Json(banks, JsonRequestBehavior.AllowGet);
}
的jQuery / AJAX
var tempResults = [];
$(function () {
$('#DisplayDistributor').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetDistributorInfo", "Agent")',
type: 'GET',
dataType: 'json',
data: request,
success: function (data) {
tempResults = data;
response($.map(data, function (value, key) {
return {
label: value,
value: key
};
}));
},
});
},
minLength: 2,
select: function (event, ui) {
console.log(ui);
$('#DistributorId').val(tempResults[ui.item.key]);
$('#DisplayDistributor').text(tempResults[ui.item.value]);
return false;
}
});
});
答案 0 :(得分:2)
返回的数据是一个对象数组。 value
调用的$.map()
参数包含对象,key
参数是数组中项目的索引(请参阅第一个“重载”here)。因此,您将对象本身设置为label
属性,这就是它显示为[object Object]
的原因。
试试这个:
response($.map(data, function (item, idx) {
return {
label: item.Value,
value: item.Key
};
}));
答案 1 :(得分:1)
您在响应中错误地使用了该项目并选择了方法:
1)您的回答应如下:
response($.map(data, function (item) {
return {
label: item.label,
value: item.value
};
}))
2)您的选择应如下所示:
select: function (event, ui) {
$('#DistributorId').val(tempResults[ui.item.value]); // You are using item.key here
$('#DisplayDistributor').text(tempResults[ui.item.label]);
return false;
}