I want to make autocomplete for textboxes. I use next instruction http://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-autocomplete-textbox-in-asp-net-mvc-5/ . Here is code of my view.
@{
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>
To autocomplete textbox i use following script;
$(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 }
}));
});
}
});
})
Which sends data to next action method.
[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("");
}
Script end controller works fine but instead of nice list i get following
But i want to make.
How to do it maybe i skipped some boostrap class or something?
jquery-ui.cssin your page?