0
テキストボックスの自動補完を行いたい。 次の指示http://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-autocomplete-textbox-in-asp-net-mvc-5/を使用します。 ここに私の見解のコードがあります。オートコンプリートjqueryテキストボックス、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クラスや何かをスキップしますか？
あなたのページに 'jquery-ui.css'を追加しましたか？ –
いいえ、私の問題を修正しました。ありがとうございます。 –