Jquery 自动完成功能不适用于 ASP.NET MVC 5答案

【问题标题】：Jquery autocomplete not working on ASP.NET MVC 5Jquery 自动完成功能不适用于 ASP.NET MVC 5
【发布时间】：2015-07-05 23:45:56
【问题描述】：

我正在学习的教程

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

问题

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

说明

我已经实现了搜索功能并且它工作正常，但是我被 jquery 的自动完成功能困住了。我在谷歌上搜索了很多和堆栈溢出以前的问题，我尝试了一切但无法解决我的问题。

代码

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

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）。查找控制台或 JavaScript 选项卡。在那里寻找任何错误。
@Junaid 你确定你的页面正确引用了 jQuery 库吗？
您同时引用了jquery-ui.js 和jquery-ui.min.j。不要那样做。在开发过程中引用未缩小的，在生产中引用缩小的。

标签： c# jquery asp.net asp.net-mvc

【解决方案1】：

我得到了解决方案。非常感谢@mason 的帮助。我在客户端控制台（使用 F12 的谷歌浏览器控制台）上检查了我的代码，发现 _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>

【讨论】：

【解决方案2】：

我不确定您使用的是哪个版本的 Visual Studio。在 2013 年，我对 jquery 自动完成没有任何问题。但是，在 2015 年，它们没有包含 jquery ui 脚本。我必须通过nuget添加它，然后在它工作之前将它添加到bundleConfig.cs。

我的脚本部分包括以下内容： @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui")

为什么微软没有在 Visual Studio 2015 中包含 jquery ui？我很想知道这个问题的答案。

【讨论】：