我想为文本框制作自动填充功能。 我使用下一条指令http://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-autocomplete-textbox-in-asp-net-mvc-5/。 这是我的观点代码。
@{
ViewBag.Title = "TempAction";
Layout = "~/Views/Shared/_SiteLayout.cshtml";
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/SearchAutocomplete.js" type="text/javascript"></script>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
From:
@Html.TextBox("SearchString", "", new {@style="display:inline",placeholder = "Search Country...", id = "TempAutoFromCountry", @class = "form-control"})
@Html.TextBox("SearchString", "", new { @style = "display:inline", placeholder = "Search City...", id = "TempAutoFromCity", @class = "form-control"})
To:
@Html.TextBox("SearchString", "", new { @style = "display:inline", placeholder = "Search Country...", id = "TempAutoToCountry", @class = "form-control"})
@Html.TextBox("SearchString", "", new { @style = "display:inline", placeholder = "Search City...", id = "TempAutoToCity", @class = "form-control"})
</body>
</html>
要自动填充文本框,请使用以下脚本;
$(document).ready(function () {
$("#TempAutoFromCity").autocomplete({
source: function (request, response) {
alert("Temp buy product work");
$.post("/BuyTicket/AutoFillAirportParam", { city: request.term, searchParam: "city" }, function (data) {
response($.map(data, function (item) {
return { label: item.City, value: item.City };
}));
});
}
});
$("#TempAutoToCity").autocomplete({
source: function (request, response) {
alert("Temp buy product work");
$.post("/BuyTicket/AutoFillAirportParam", { city: request.term, searchParam: "city" }, function (data) {
response($.map(data, function (item) {
return { label: item.City, value: item.City };
}));
});
}
});
$("#TempAutoFromCountry").autocomplete({
source: function (request, response) {
$.post("/BuyTicket/AutoFillAirportParam", { city: request.term, searchParam: "country" }, function (data) {
response($.map(data, function (item) {
return { label: item.Country, value: item.Country };
}));
});
}
});
$("#TempAutoToCountry").autocomplete({
source: function (request, response) {
$.post("/BuyTicket/AutoFillAirportParam", { city: request.term, searchParam: "country" }, function (data) {
response($.map(data, function (item) {
return { label: item.Country, value: item.Country }
}));
});
}
});
})
将数据发送到下一个操作方法。
[HttpPost]
public JsonResult AutoFillAirportParam(string city,string searchParam)
{
if (searchParam == "city")
{
using (AirportListRepository repo = new AirportListRepository())
{
List<Airport> airportList = repo.GetAirportsByParam(city, SeacrhParams.City);
return Json(airportList.Take(20), JsonRequestBehavior.AllowGet);
}
}
else if (searchParam == "country")
{
using (AirportListRepository repo = new AirportListRepository())
{
List<Airport> airportList = repo.GetAirportsByParam(city, SeacrhParams.Country);
return Json(airportList.Take(20), JsonRequestBehavior.AllowGet);
}
}
return Json("");
}
如何做到这一点也许我跳过了一些boostrap类或什么?
答案 0 :(得分:1)
您似乎忘了在页面中添加jquery-ui.css了。
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">