jquery-ui オートコンプリートを使用しており、オートコンプリート関数内で ajax 呼び出しを行っています。 Json を返すコントローラー アクションを呼び出していますが、提案がドロップダウンに表示されません。
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) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
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; }
}
そして、これは私がajax呼び出しに応答して得ているものです(これはfirebugの画像です)
詳細が必要な場合はお尋ねください。事前に感謝します。
編集
今、私はselectコールバックで選択された値にアクセスしようとしていますが、その値を与えていますUndefined
select: function (event, ui) {
alert(ui.item.Name);
alert(ui.item.Value);
alert(ui.item.LogoUrl);
},