.autocomplete не является функцией Ошибка

ниже мой My Code

<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'; return false;" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

И мой HTML-код

<div class="ui-widget">
<input name="searcharea" class="selectarea" id="searcharea" type="text" value="" placeholder="Area">
</div>

И моя функция

<script>
$(function(){
    $( "#searcharea" ).autocomplete({
        source: "suggestions.php"
    });
    $( "#searchcat" ).autocomplete({
        source: "suggestions1.php"
    });
});
</script>

Я включил эту страницу в отдельный файл с кодом поиска моего сайта, и я вложил его на разные страницы. На моей индексной странице он предлагает мне значения из исходных файлов, но на других страницах он дает мне typerror on line

$( "#searcharea" ).autocomplete({

Моя ссылка на сайт: http://www.jodhpuryp.in/

Это источник моего поля автозапусков http://api.jqueryui.com/autocomplete/

Может кто-нибудь сказать мне, почему я получаю эту ошибку на других страницах моего веб-сайта, пока работает на индексной странице. Любая помощь приветствуется. Спасибо

Ответ 1

Нашел проблему, я включил другой файл jquery для своего переводчика google, они противоречили друг другу и в результате не загружали функцию автозаполнения.

Ответ 2

Похоже, что автозаполнение вызывается до того, как библиотека, которая определяет ее, фактически загружена - если это имеет смысл?

Если ваш script является встроенным, а не ссылкой, переместите его в нижнюю часть страницы. Или (мой предпочтительный вариант) поместите script во внешний .js файл, а затем укажите его:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="yourNewJSFile"></script>

Изменить: если вы нарушите свой script, убедитесь, что он указан ПОСЛЕ любых библиотек JQuery, на которые он опирается:)

Ответ 3

Это смущает, но это задержало меня на некоторое время, поэтому я решил, что выложу это здесь.

У меня не был установлен jQuery UI, только классический jQuery, который не включает автозаполнение (по-видимому). Добавление следующих тегов позволило автозаполнение через пользовательский интерфейс jQuery.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

и..

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>

Следует отметить, что значение HTML autocomplete="off" для формы или блока формы не позволит браузеру выполнить метод .autocomplete(), но не заблокирует функцию пользовательского интерфейса jQuery.

Ответ 4

В моем случае мой другой член команды включил еще одну версию jquery.js, когда он добавил в bootstrap.min.js. После удаления дополнительного jquery.js проблема решена.

Ответ 5

Обратите внимание, что если вы не используете полную библиотеку пользовательских интерфейсов jquery, это может быть запущено, если вам не хватает виджета, меню, положения или ядра. В зависимости от вашей версии пользовательского интерфейса jQuery могут быть разные зависимости

Ответ 6

Вы вызываете функцию перед загрузкой страницы jQuery. Всегда целесообразно использовать jQuery внутри $(document).ready(function() {//Ваш код здесь})

В вашем случае:

$(document).ready(function(){
  $(function(){
    $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
    });
   $( "#searchcat" ).autocomplete({
      source: "suggestions1.php"
    });
   });

});

Ответ 7

Моя проблема закончилась тем, что визуальная студия ловила необработанное исключение и предотвращала дальнейшее выполнение script. Поскольку я работал в среде IDE, похоже, что возникла проблема, когда ее не было. Автозаполнение работало отлично. Я добавил блок try/catch и сделал IDE счастливым.

 $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term },
            success: function (data) {
                try {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                } catch (err) { }

            }
        })

Ответ 8

У меня эта ошибка работает в ASP.net. Когда я запускал приложение из Visual Studio, оно работало нормально, но когда я опубликовал проект и протестировал его, у меня возникла ошибка "Автозаполнение не является функцией" в chrom Inspect отладчике. Я обнаружил, что различия между двумя средами были вызваны определением в web.config. в теге компиляции. если assign debug = "false", то все определения Bundel выполняются, а компиляция выполняется как выпуск. if debug = true ", то компиляция предназначена для этапа отладки, который не включает в себя библиотеку jundeling и minifyning. Поэтому различия между средами.

<system.web>
    <compilation debug="false" targetFramework="4.5.1"/>
    <httpRuntime targetFramework="4.5.1"/>
</system.web>

Кроме того, изучая эти две среды, я обнаружил, что для среды отладки везде (_Layout.cshtml) @Scripts.Render("~/bundles/jquery") был в коде, где (под APP_Start) BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

он отображается как:

<script src="/Static/js/lib/jquery-1.12.4.js"></script>
<script src="/Static/js/lib/jquery-ui.js"></script>

и другая среда (debug = false)

<script src="/bundles/jquery?v=YOLEkbKJYtNeDq0o56xjzXWKoYzrF5Vkqgyc9Cb0YgI1"></script>

В режиме отладки это работает, и другой получил проблему.

Что касается js lib, я увидел два файла jquery-ui:

jquery-ui.js jquery-ui.min.js

получается, что они оба приходят по умолчанию из шаблона нового проекта MVC. Когда jquery-ui.min.js был удален из библиотеки, проблема была решена.

Я верю, что хотя jquery-ui.js был определен в BundleConfig.cs, на самом деле jquery-ui.min.js был взят.

Кстати, jquery-ui.min.js не включал функцию автозаполнения, примененную к jquery-ui.js, который ее включал.

веселит.

Ответ 9

Если на вашей странице есть раздел для сценариев, например, приведенный ниже, убедитесь, что вы обращаетесь к своей библиотеке Jquery из этого раздела.

@section Scripts 
{ 
   <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
}

Ответ 10

когда вы видите эту проблему, всегда помещайте свою функцию автозаполнения в функцию keyup и убедитесь, что вы добавили библиотеки

$( "#searcharea" ).keyup(function(){
   $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
   });
});

Ответ 11

Я столкнулся с той же проблемой и пытаюсь ее решить, но, к сожалению, она больше не будет работать! Если вы столкнулись с той же проблемой и не можете найти решение, это может помочь вам.

Если вы настраиваете jquery/jquery-ui глобально в веб-пакете, вам нужно импортировать автозаполнение следующим образом:

import { autocomplete } from 'webpack-jquery-ui';

И вы должны включить jquery-ui.css в раздел заголовка html, я не понимаю, почему он не работает без него!

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Надеюсь, что ваша проблема будет решена.

И обязательно включите/установите следующие три

JQuery-щ-CSS
JQuery-щ
JQuery

Ответ 12

Проверьте Sources-> Сценарии в инструменте проверки браузера. Иногда могут быть ссылки на несколько файлов jQuery. В ASP.NET MVC это обычно происходит, когда на странице макета уже есть ссылка на jQuery.

Ответ 13

Загрузка библиотеки jQuery перед библиотекой Angularjs помогла мне.

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

Ответ 14

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>