Создаем автозаполнение поля поиска на основе AJAX

Если пользователь ищет что-то на вашем блоге, то ему стоит немного помочь? Данный код использует технику, которая стала популярной благодаря Google. При заполнении поля поиска будет выводиться выпадающий список тегов на основании того, что уже было введено в поле поиска.

Для использования кода нужно загрузить последнюю версию jQuery и плагина Autocomplete. Теперь создаем папку js в каталоге темы и помещаем оба файла туда. Далее копируем следующий код перед тегом /head в файл header.php вашей темы:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.css" media="screen" />

Теперь нужно добавить следующий код перед тегом /head и заменить $("#ID_ПОЛЯ ПОИСКА") на реальный id, который используется для поля поиска на вашем сайте WordPress.
<script type="text/javascript">
$(document).ready(function(){
    var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
    $("#<code>ID_ПОЛЯ ПОИСКА</code>").autocomplete(data);
})
</script>

Теги:
автозаполнение, поиск, AJAX
Добавлено: 02 Мая 2018 09:59:44 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...