自动完成jquery文本框,在MVC 5中显示简单列表

时间:2016-09-06 12:14:57

标签: jquery asp.net-mvc autocomplete

我想为文本框制作自动填充功能。 我使用下一条指令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("");

        }

脚本结束控制器工作正常但不是很好的列表我得到了跟随 enter image description here

但我想做。 enter image description here

如何做到这一点也许我跳过了一些boostrap类或什么?

1 个答案:

答案 0 :(得分:1)

您似乎忘了在页面中添加jquery-ui.css了。

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