- Вопрос или проблема
- Ответ или решение
- Проблема с отображением выпадающего списка в автозаполнении jQuery UI
- 1. Проверьте подключение библиотек jQuery и jQuery UI
- 2. Проверьте ваш JavaScript код
- 3. Убедитесь, что HTML элемент существует
- 4. Стили CSS
- 5. Конфликты с другими скриптами
- 6. Режим отладки
- Заключение
Вопрос или проблема
Я хочу использовать jQuery UI и автозаполнение в своей форме поиска. Сначала я хочу проверить, будет ли отображаться какой-либо список, поэтому я скопировал код из документации и вставил его в свой шаблон страницы. CSS и JS jQuery UI загружены, потому что я вижу это в инструментах разработчика в Chrome. Однако выпадающий список не отображается. Я добавил следующий HTML в свой header.php
<div class="ui-widget">
<label for="tags">Теги: </label>
<input id="tags">
</div>
Мой JS
(function($){
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
})(jQuery);
А вот код, как я добавил jQuery UI и мой search.js
wp_enqueue_script('autocomplete', get_template_directory_uri() .'/js/jquery-ui.js', array('jquery'));
wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'/js/search.js', array('jquery', 'autocomplete'));
wp_enqueue_style('autocomplete.css', get_template_directory_uri() .'/css/jquery-ui.css');
У меня нет идеи, что я делаю неправильно. Я пытался добавить форму поиска в разные места в моем шаблоне, но результат тот же – выпадающий список не отображается. Я использую WordPress и тему Understrap.
Спасибо заранее за советы
Я протестировал это у себя на локальном сервере. Все работает отлично 🙂
Вы можете это проверить. Скриншот: http://nimb.ws/Vl1L0F
По умолчанию WP поддерживает автозаполнение jQuery в ядре. Вы можете проверить это здесь. (ищите ключевое слово ‘jQuery UI Autocomplete’).
Вы можете попробовать следовать моему коду и затем протестировать снова 🙂
- Добавьте код в
functions.php.
add_action( 'wp_enqueue_scripts', 'add_scripts' );
function add_scripts() {
wp_enqueue_style( 'jquery-ui-
styles','http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
wp_enqueue_style( 'demo-styles','https://jqueryui.com/resources/demos/style.css');
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js' );
}
- Создайте
custom.js(вы должны внимательно проверить, что URL содержит файл custom.js в вашей теме), чтобы написать JS код.
jQuery(document).ready(function($) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Готово!.
Ответ или решение
Проблема с отображением выпадающего списка в автозаполнении jQuery UI
Если выпадающий список автозаполнения не отображается на вашем веб-сайте, проблема может заключаться в нескольких аспектах реализации. Рассмотрим основные шаги и рекомендации, которые помогут вам устранить данную проблему.
1. Проверьте подключение библиотек jQuery и jQuery UI
Убедитесь, что вы правильно подключили все необходимые скрипты и стили для jQuery и jQuery UI. Это можно сделать, проверив консоль разработчика (DevTools) в вашем браузере на наличие ошибок. Убедитесь, что ссылки на библиотеки правильные и что они загружаются. Например:
function add_scripts() {
wp_enqueue_style('jquery-ui-styles', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-autocomplete');
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery', 'jquery-ui-autocomplete'), null, true);
}
add_action('wp_enqueue_scripts', 'add_scripts');2. Проверьте ваш JavaScript код
Убедитесь, что ваш JavaScript код правильно настроен и выполняется после полной загрузки DOM. В вашем примере кода правильнее использовать jQuery(document).ready(function($) { ... });, чтобы вызывать автозаполнение после того, как документ будет готов.
Пример кода может выглядеть так:
jQuery(document).ready(function($) {
var availableTags = [ /* ... ваш массив тегов ... */ ];
$("#tags").autocomplete({
source: availableTags
});
});3. Убедитесь, что HTML элемент существует
Проверьте, чтобы элемент с ID tags действительно существовал на странице перед инициализацией автозаполнения. Если у вас есть динамически загружаемый контент, убедитесь, что JS код выполняется после его загрузки.
4. Стили CSS
Убедитесь, что вы подключили стили jQuery UI. Если стили не подключены, это может привести к тому, что выпадающий список будет невидимым или неправильно отформатированным:
wp_enqueue_style('jquery-ui-css', get_template_directory_uri() . '/css/jquery-ui.css');5. Конфликты с другими скриптами
Проверьте на наличие конфликтов с другими скриптами на вашей странице. Иногда другие библиотеки или ваши собственные скрипты могут мешать работе jQuery UI. Используйте консоль разработчика для проверки ошибок JavaScript.
6. Режим отладки
Запустите режим отладки, чтобы посмотреть, есть ли какие-то ошибки на странице. Это можно сделать с помощью консоли браузера, где можно увидеть, работают ли ваши скрипты и нет ли ошибок, мешающих выполнению кода.
Заключение
Если после выполнения всех этих шагов проблема не решена, попробуйте создать минимальный пример на отдельной странице или в другом проекте. Это поможет вам определить, связана ли проблема с вашим текущим проектом или является общей проблемой с интеграцией jQuery UI. Кроме того, используйте лучшие практики и структурируйте свой код, что может помочь в будущем избежать подобных ошибок.
Следуя этим рекомендациям, вы сможете устранить проблему с отображением выпадающего списка автозаполнения jQuery UI в вашей форме поиска.