Jquery ui 自动完成未按预期工作
我尝试用jQueryUI1.10.2在MVC5中实现Jquery ui 自动完成未按预期工作,jquery-ui,autocomplete,asp.net-mvc-5,jquery-autocomplete,Jquery Ui,Autocomplete,Asp.net Mvc 5,Jquery Autocomplete,我尝试用jQueryUI1.10.2在MVC5中实现 @{ ViewBag.Title = "Home Page"; Layout = null; } <p> Enter country name @Html.TextBox("Country") <input type="submit" id="GetCustomers" value="Submit" /> </p> <span id="rData"><
@{
ViewBag.Title = "Home Page";
Layout = null;
}
<p>
Enter country name @Html.TextBox("Country")
<input type="submit" id="GetCustomers" value="Submit" />
</p>
<span id="rData"></span>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
@Styles.Render("~/Content/themes/base/css")
<script type="text/javascript">
$(document).ready(function () {
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/AutoCompleteCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function(data) {
response($.map(data, function(item) {
return { label: item.Country, value: item.Country };
}));
}
});
}
});
})
</script>
服务器端是
...
[HttpPost]
public JsonResult AutoCompleteCountry(string term)
{
// just something to return..
var list = new List<string>() { "option1", "option2", "option3"};
var result = (from r in list
select r);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
我有两个问题
1.它用3个点打开下拉自动完成,但没有实际的字符串。
2.它有这样一个恼人的消息:发现了3个结果-我想消除它
您是否知道如何面对这两个问题,或者更简洁地在MVC5中实现它?使用返回数据代替返回{label:item.Country,value:item.Country};
找到3个要点和3个结果是因为缺少jQuery UI css文件。该文件将格式化一个下拉列表,看起来会更好。您可以使用其他css自定义下拉列表的外观 另外,您看到3个空结果,因为您的JS正在引用item.Country
return { label: item.Country, value: item.Country };
但是您的服务器代码只发送了3个字符串
new List<string>() { "option1", "option2", "option3"};
或者,更改服务器代码以发送更复杂的对象
new List<Object>() { new { Country = "option1" }, new { Country = "option2" }, new { Country = "option3" } };
new List<Object>() { new { Country = "option1" }, new { Country = "option2" }, new { Country = "option3" } };