Faradey Inimicos Faradey Inimicos - 3 months ago 19
jQuery Question

Autocomplete jquery textbox,shows simple list in MVC 5

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
enter image description here

But i want to make.
enter image description here

How to do it maybe i skipped some boostrap class or something?

Div Div
Answer

Here seems like you've forgot to add jquery-ui.css in your page.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">