我在使用自动完成功能时出现问题,它会触及控制器并返回值,但页面上没有显示任何内容,我提供了以下代码,感谢任何帮助。
HomeControllerMethod
[HttpPost]
public JsonResult GetAccounts(string id)
{
var accounts = NavRepository.GetAccountsBasedOnString(id);
return Json(accounts, JsonRequestBehavior.AllowGet);
}
About.cshtml
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"> </script>
<script type="text/javascript">
$(function () {
$('#searchTerm').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetAccounts", "Home")',
data: { id: request.term },
dataType: 'json',
type: 'POST',
minLength: 3,
success: function (event, ui) {
searchTerm.valueOf (ui.item.value);
}
});
}
});
});
</script>
@using (Html.BeginForm())
{
<form method="post" action="">
<input id="searchTerm" name="searchTerm" type="text" />
<input type="submit" value="Go" />
</form>
}
编辑: 以下是我的最终功能
$(function () {
$('#searchTerm').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetAccounts", "Home")',
data: { id: request.term },
dataType: 'json',
type: 'POST',
minLength: 3,
success: function (data) {
response(data); ;
}
});
}
});
});
答案 0 :(得分:3)
一些事情:
您需要调用窗口小部件提供给您提供的response
函数的source
函数。此外,看起来你有一个自动完成选项(minLength
)混入了AJAX调用:
$('#searchTerm').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetAccounts", "Home")',
data: { id: request.term },
dataType: 'json',
type: 'POST',
success: function (data) {
response(data); // You may have to perform post-processing here depending on your data.
}
});
},
minLength: 3
});
此外,请确保您为窗口小部件提供了所需的数据。您需要为response
函数提供一个字符串数组,例如:
["Item1", "Item2", "Item3"]
或者,您可以提供具有标签属性,值属性或两者的对象数组:
[{ label: "Item1", value: "1" }, { label: "Item2", value: "2" }]
您可能已经这样做了,但我必须看看控制器操作返回的内容。