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

时间:2012-06-10 16:57:59

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

我显然遗漏了一些东西,但在尝试将自动填充添加到文本框时我不断收到此消息:.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插件没有正确加载,但我看不出原因!

4 个答案:

答案 0 :(得分:4)

在我的头上搔了一个小时之后我发现了问题,所以这里有:

  1. 您必须将您的javascript添加到@section Scripts {}部分
  2. 我必须包含以下包: @ Scripts.Render( “〜/捆绑/ jqueryval”) @ Scripts.Render( “〜/捆绑/ jQueryUI的”)
  3. MVC4附带正确的JQuery文件,默认配置已包含必要的软件包。

    希望这有助于其他人。

答案 1 :(得分:1)

您似乎没有包含定义jquery-ui-1.8.11.js方法的autocompete脚本。您只包含了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>

答案 2 :(得分:0)

  

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

您如何确定jquery插件未正确加载?首先,您应该通过直接组合引用脚本/样式并使用System.Web.Optimization帮助程序(@Scripts@Styles来停止混乱。

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

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

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

答案 3 :(得分:0)

在我的情况下,文件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")); 

它有效。