2012-06-10 2 views
2

Я abviously что-то отсутствует, но я получаю это сообщение при попытке добавить автозаполнения в текстовое поле: .autocomplete не является функциейMVC4 - JQuery автозаполнения - .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 не загружается правильно, но я не понимаю, почему!

ответ

3

После чесать голову в течение часа или около того, я нашел эту проблему, так что здесь идет:

  1. Вы должны добавить ваш javascript для @section Scripts {} раздел
  2. Мне пришлось включить следующие пакеты: @ Scripts.Render ("~/bundles/jqueryval") @ Scripts.Render ("~/bundles/jqueryui")

MVC4 поставляется с правильными файлами JQuery, а в конфигурации по умолчанию уже содержатся необходимые пакеты.

Надеюсь, это поможет кому-то еще.

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> 
+0

Hi Darin, Добавлена ​​недостающая ссылка, но все еще не повезло. (Я также обновил фрагмент) – Jacques

+0

Осмотрите FireBug и убедитесь, что все скрипты и стили правильно загружены, и вы не получаете 404 ошибок. Я бы рекомендовал вам максимально упростить и включить только строгие минимальные скрипты (jquery и jquery.ui), чтобы более легко сузить проблему. Также не печатайте URL-адреса, как в вашем примере. Если вы не хотите использовать пакеты, по крайней мере, используйте помощники URL-адресов, чтобы убедиться, что ссылки правильно указаны. После того, как вы убедитесь, что 2 скрипта включены правильно, убедитесь, что в консоли javascript нет ошибок. В любом случае отлаживайте свой код. –

0

Я уверен, что плагин Jquery не загружается правильно

Как вы знаете, верно, что плагин jquery не загружен правильно? Сначала вы должны прекратить испортить вещи, объединив ссылки на скрипты/стили напрямую и используя помощники System.Web.Optimization (@Scripts, @Styles ..).

Используйте любой из подходов. Сначала я предлагаю вам непосредственно загружать необходимые css и скрипты с помощью Url.Content и видеть, что все работает нормально, и если оно затем полностью заменяется @Scripts и @Styles.

Чтобы узнать больше о комплектации/минификация см эту ссылку

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

+0

Привет, Марк, Спасибо за совет. Это только проект для домашних животных, но я буду помнить об этом. – Jacques

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")); 

и он работает.

Смежные вопросы