Ответ 1
Нашел проблему, я включил другой файл jquery для своего переводчика google, они противоречили друг другу и в результате не загружали функцию автозаполнения.
ниже мой 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/
Может кто-нибудь сказать мне, почему я получаю эту ошибку на других страницах моего веб-сайта, пока работает на индексной странице. Любая помощь приветствуется. Спасибо
Нашел проблему, я включил другой файл jquery для своего переводчика google, они противоречили друг другу и в результате не загружали функцию автозаполнения.
Похоже, что автозаполнение вызывается до того, как библиотека, которая определяет ее, фактически загружена - если это имеет смысл?
Если ваш 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, на которые он опирается:)
Это смущает, но это задержало меня на некоторое время, поэтому я решил, что выложу это здесь.
У меня не был установлен 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.
В моем случае мой другой член команды включил еще одну версию jquery.js, когда он добавил в bootstrap.min.js. После удаления дополнительного jquery.js проблема решена.
Обратите внимание, что если вы не используете полную библиотеку пользовательских интерфейсов jquery, это может быть запущено, если вам не хватает виджета, меню, положения или ядра. В зависимости от вашей версии пользовательского интерфейса jQuery могут быть разные зависимости
Вы вызываете функцию перед загрузкой страницы jQuery. Всегда целесообразно использовать jQuery внутри $(document).ready(function() {//Ваш код здесь})
В вашем случае:
$(document).ready(function(){
$(function(){
$( "#searcharea" ).autocomplete({
source: "suggestions.php"
});
$( "#searchcat" ).autocomplete({
source: "suggestions1.php"
});
});
});
Моя проблема закончилась тем, что визуальная студия ловила необработанное исключение и предотвращала дальнейшее выполнение 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) { }
}
})
У меня эта ошибка работает в 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.csbundles.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, который ее включал.
веселит.
Если на вашей странице есть раздел для сценариев, например, приведенный ниже, убедитесь, что вы обращаетесь к своей библиотеке Jquery из этого раздела.
@section Scripts
{
<script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
}
когда вы видите эту проблему, всегда помещайте свою функцию автозаполнения в функцию keyup и убедитесь, что вы добавили библиотеки
$( "#searcharea" ).keyup(function(){
$( "#searcharea" ).autocomplete({
source: "suggestions.php"
});
});
Я столкнулся с той же проблемой и пытаюсь ее решить, но, к сожалению, она больше не будет работать! Если вы столкнулись с той же проблемой и не можете найти решение, это может помочь вам.
Если вы настраиваете 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">
Надеюсь, что ваша проблема будет решена.
И обязательно включите/установите следующие три
Проверьте Sources-> Сценарии в инструменте проверки браузера. Иногда могут быть ссылки на несколько файлов jQuery. В ASP.NET MVC это обычно происходит, когда на странице макета уже есть ссылка на jQuery.
Загрузка библиотеки 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>
<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>