jQuery自动完成功能不适用于ASP.NET MVC 5

debugcn 发表于 Dev

朱尼德

我正在关注的教程

嗨，我正在使用本教程ASP.NET教程第76部分 实现jquery自动完成功能。在mvc中实现自动完成文本框功能https://www.youtube.com/watch?v=MmBdMZJ3Jlo

问题

当我在输入框中键入内容时，自动完成功能不起作用

描述

我已经实现了搜索功能及其正常工作，但我被困在jquery的自动完成功能上。我在Google上搜索了很多内容，并堆积了以前的问题，我尝试了所有尝试，但无法解决我的问题。

代码

这是我的自动完成代码（我尚未包含搜索代码）

Index.cshtml

<link href="~/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
            $("#txtSearch").autocomplete({
                source: '@Url.Action("GetAirports")'
            });
    });

</script>

 @using(@Html.BeginForm())
 {
        <br />
        <b>AirPort Code:</b>
        @Html.TextBox("SearchTerm", null, new { id="txtSearch"})
        <input type="submit" value="Search" />     
 }

和我的控制器代码

HomeController.cs

public JsonResult GetAirports(string term)
{
            traveloticketEntities db = new traveloticketEntities();
            List<String> Airports = new List<String>();
            Airports = db.IataAirportCodes.Where(x => x.code.StartsWith(term)).Select(y=>y.code).ToList();
            return Json(Airports, JsonRequestBehavior.AllowGet);

}

朱尼德

我找到了解决方案。非常感谢@mason的帮助。我在客户端控制台（使用F12的Google Chrome控制台）上检查了代码，发现_Layout.cshtml在index.cshtml文件的末尾添加了其他jQuery库，这些库正在覆盖index.cshtml中的库。所以我从_Layout.css中删除了这段代码

 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryval")

并按以下顺序将我的jQuery库放在Index.cshtml中

<script src="~/Scripts/external/jquery/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="~/Scripts/myScript.js" type="text/javascript"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。