MVC4 - JQuery AutoComplete - .autocomplete 不是一个函数答案

【问题标题】：MVC4 - JQuery AutoComplete - .autocomplete is not a functionMVC4 - JQuery AutoComplete - .autocomplete 不是一个函数
【发布时间】：2012-06-13 19:00:24
【问题描述】：

我显然遗漏了一些东西，但在尝试将自动完成添加到文本框时不断收到此消息：.autocomplete 不是函数

_Layout（仅头部）：

<head>
 <meta charset="utf-8" />
 <title>@ViewBag.Title - My ASP.NET MVC Application</title>
 <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <meta name="viewport" content="width=device-width" />
 <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
 <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
 <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
 @Styles.Render("~/Content/themes/base/css", "~/Content/css")
 @Scripts.Render("~/bundles/modernizr")

索引：

    <script type="text/javascript">
$(function () {
    $("#searchTerm").autocomplete({
       source: "/Search/AutocompleteSuggestions",
       minLength: 3,
       select: function (event, ui) {
             if (ui.item) {
                $("#searchTerm").val(ui.item.value);
                $("form").submit();
             }
       }
      });
});

@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))'
{
<input id="searchTerm" name="searchTerm" type="text" />
<input type="submit" value="Go" />
}

我很确定 Jquery 插件没有正确加载，但我不明白为什么！

【问题讨论】：

标签： jquery asp.net-mvc razor autocomplete asp.net-mvc-4

【解决方案1】：

在摸了一个小时左右后，我发现了问题，所以这里是：

您必须将 javascript 添加到 @section Scripts {} 部分
我必须包含以下软件包： @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui")

MVC4 附带了正确的 JQuery 文件，并且默认配置已经包含了必要的包。

希望这对其他人有所帮助。

【讨论】：

【解决方案2】：

您似乎没有包含定义 autocompete 方法的 jquery-ui-1.8.11.js 脚本。您只包含了jquery-1.6.2.min.js，这是必需的，但还不够。此外，我建议您使用捆绑包将所需的脚本和样式组合并缩小到一个文件中，从而减少带宽并缩短页面加载时间：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
    <meta name="viewport" content="width=device-width" />
</head>

【讨论】：

嗨达林，添加了缺失的参考，但仍然没有运气。（我也更新了sn-p）
使用 FireBug 检查并确保所有脚本和样式都已正确加载并且您没有收到 404 错误。我建议您尽可能简化并仅包含严格的最小脚本（jquery 和 jquery.ui），以便更轻松地缩小问题范围。也不要像您在示例中那样对网址进行硬编码。如果您不想使用捆绑包，至少使用 url 帮助程序来确保正确引用 url。确保正确包含 2 个脚本后，请确保 javascript 控制台中不存在任何错误。无论如何调试你的代码。

【解决方案3】：

我很确定 Jquery 插件没有正确加载

您如何确定没有正确加载 jquery 插件？首先，您应该通过直接组合引用脚本/样式并使用System.Web.Optimization helpers(@Scripts, @Styles..) 来停止搞砸事情。

使用任何一种方法。我建议您首先使用Url.Content 直接加载所需的css 和脚本，然后查看一切正常，如果可以，然后将它们完全替换为@Scripts 和@Styles。

要了解有关捆绑/缩小的更多信息，请参阅此链接

http://ofps.oreilly.com/titles/9781449320317/ch_ClientOptimization.html#_putting_asp_net_mvc_to_work

【讨论】：

嗨，马克，感谢您的建议。这只是一个宠物项目，但我会记住这一点。

【解决方案4】：

在我的情况下，文件BundleConfig.cs 正在注册

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

它会导致 JQuery UI 出现问题。我把它改成：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.7.1.min.js"));

它有效。

【讨论】：