Функция get_search_form() может (и должна!) Использоваться для отображения формы поиска для вашего сайта. Это делает работу, но это очень мягкий. Вместе с WordPress, начиная с версии 3.3, это инструмент, который может упростить его использование. В этом уроке я покажу вам, как добавить автозаполнение jQuery в форму поиска.
Откройте форму поиска
В этом руководстве предполагается, что ваша тема использует get_search_form() для отображения формы поиска и вызывает wp_footer() .
Сначала давайте взглянем на форму поиска TwentyEleven ( searchform.php в вашей теме). Скорее всего, ваш очень похож. Если вы не можете найти searchform.php в своей теме, возможно, он использует разметку по умолчанию, которая почти идентична. Если ваша форма поиска жестко запрограммирована, я бы рекомендовал поместить ее в searchform.php и использовать get_search_form(); показать это.
|
1
2
3
4
5
|
<form method=»get» id=»searchform» action=»<?php echo esc_url( home_url( ‘/’ ) ); ?>»>
<label for=»s»><?php _e( ‘Search’, ‘twentyeleven’ );
<input type=»text» name=»s» id=»s» placeholder=»<?php esc_attr_e( ‘Search’, ‘twentyeleven’ ); ?>» />
<input type=»submit» name=»submit» id=»searchsubmit» value=»<?php esc_attr_e( ‘Search’, ‘twentyeleven’ ); ?>» />
</form>
|
Нам нужен атрибут ID входных данных для поиска, поэтому мы можем нацелить его с помощью jQuery. В этом случае это ‘ s ‘.
Прежде чем мы начнем, давайте сделаем немного оснований. Это также послужит кратким описанием того, что мы будем делать.
Шаг 1 Земляные работы
Все следующее должно идти в файл functions.php вашей темы. Мы собираемся подключить крючок ‘ init ‘ с помощью функции, которая будет:
- Зарегистрируйте немного CSS и JavaScript — нам понадобится немного стилей jQuery UI. Я просто собираюсь использовать базовый стиль, но вы всегда можете свернуть свою собственную тему, чтобы соответствовать вашему сайту. Вы можете добавить его в style.css вашей темы или сохранить в отдельном файле и зарегистрировать, как показано здесь. Нам также понадобится некоторый пользовательский javascript, который я назову myacsearch.js и сохраню в папке js моей темы.
- Соедините наш JavaScript и CSS — мы хотим добавить наш стиль и JavaScript, когда (и только когда) отображается форма поиска. Фильтр
get_search_formсрабатывает всякий раз, когда это происходит, и мы будем использовать его для постановки в очередь наших скриптов и стилей. - Действия Ajax. Нам нужно добавить функцию обратного вызова для обработки запроса и возврата результатов, когда WordPress получает наше действие через AJAX. Для этого мы используем хуки,
wp_ajax_{action}иwp_ajax_nopriv_{action}где{action}используется в качестве идентификатора для действия, которое мы хотим выполнить (и поэтому должно быть уникальным). Я установлю его наmyprefix_autocompletesearch.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
add_action( ‘init’, ‘myprefix_autocomplete_init’ );
function myprefix_autocomplete_init() {
// Register our jQuery UI style and our custom javascript file
wp_register_style(‘myprefix-jquery-ui’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css’);
wp_register_script( ‘my_acsearch’, get_template_directory_uri() . ‘/js/myacsearch.js’, array(‘jquery’,’jquery-ui-autocomplete’),null,true);
// Function to fire whenever search form is displayed
add_action( ‘get_search_form’, ‘myprefix_autocomplete_search_form’ );
// Functions to deal with the AJAX request — one for logged in users, the other for non-logged in users.
add_action( ‘wp_ajax_myprefix_autocompletesearch’, ‘myprefix_autocomplete_suggestions’ );
add_action( ‘wp_ajax_nopriv_myprefix_autocompletesearch’, ‘myprefix_autocomplete_suggestions’ );
}
|
Шаг 2 AJAX URL
Мы будем использовать AJAX для отправки ввода формы поиска и возврата соответствующих сообщений в качестве пользовательских типов. Таким образом, нам нужно будет указать автозаполнение URL-адреса для отправки запроса. WordPress имеет определенный URL, который admin_url( 'admin-ajax.php' ) запросы AJAX, и это задается admin_url( 'admin-ajax.php' ) . Это дает нам URL на стороне сервера — но мы хотим, чтобы он был в нашем файле javascript. Это можно сделать с помощью wp_localize_script . Эта функция изначально предназначалась для помощи в локализации, но мы можем использовать ее для нашего использования. Поместите это сразу после регистрации пользовательского javascript my_acsearch на шаге 1:
|
1
|
wp_localize_script( ‘my_acsearch’, ‘MyAcSearch’, array(‘url’ => admin_url( ‘admin-ajax.php’ )));
|
Это определяет объект MyAcSearch которого есть свойство ‘ url ‘. Такой метод позволяет отправлять настройки, хранящиеся в базе данных, в файл javascript, но для наших целей нам нужен только MyAcSearch.url который является URL-адресом для направления нашего AJAX-запроса.
Шаг 3 JavaScript
Автозаполнение jQuery включает в себя немало функциональности, но мы будем придерживаться основ. Вы можете увидеть все его возможности на демонстрационной странице . Данные, которые мы отправляем на URL AJAX, будут включать переменную действия, значением которой является идентификатор действия, который мы установили на шаге 1. В нашем случае это myprefix_autocompletesearch . Итак, теперь в нашем файле JavaScript, добавьте следующее.
|
1
|
var acs_action = ‘myprefix_autocompletesearch’;
|
Это позволяет нам идентифицировать запрос, выполнить поиск и вернуть результаты. Затем мы применяем функцию автозаполнения к форме поиска (здесь мы используем атрибут ID ввода формы):
|
1
2
3
4
5
6
7
8
9
|
$(«#s»).autocomplete({
source: function(req, response){
$.getJSON(MyAcSearch.url+’?callback=?&action=’+acs_action, req, response);
},
select: function(event, ui) {
window.location.href=ui.item.link;
},
minLength: 3,
});
|
Функция источника должна возвращать массив объектов. Каждый объект должен иметь свойство « label » (для отображения в списке предложений), и мы добавим свойство « link », URL-адрес публикации. Функция выбора срабатывает, когда пользователь щелкает одно из предложений. В этом примере, нажав на предложение, вы попадете на эту страницу. minLength указывает количество символов, которые пользователь должен набрать, прежде чем minLength автозаполнение.
Мы завернем все это в обработчик .ready , поэтому он запускается только после полной загрузки страницы. Тогда полный JavaScript:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
jQuery(document).ready(function ($){
var acs_action = ‘myprefix_autocompletesearch’;
$(«#s»).autocomplete({
source: function(req, response){
$.getJSON(MyAcSearch.url+’?callback=?&action=’+acs_action, req, response);
},
select: function(event, ui) {
window.location.href=ui.item.link;
},
minLength: 3,
});
});
|
Шаг 4: ставим в очередь наши сценарии и стили
Всякий раз, когда форма поиска отображается с использованием get_search_form(); функция, наша функция myprefix_autocomplete_search_form будет срабатывать. В этой функции мы ставим в очередь скрипты и стили, которые нам нужны для автозаполнения. Нам не нужно загружать jQuery или автозаполнение напрямую, WordPress уже знает, что нам это нужно, и справится с этим за нас.
|
1
2
3
4
|
function myprefix_autocomplete_search_form(){
wp_enqueue_script( ‘my_acsearch’ );
wp_enqueue_style( ‘myprefix-jquery-ui’ );
}
|
Осталось только обработать запрос AJAX.
Шаг 5 Обработка запроса AJAX
Напомним, что в нашей функции myprefix_autocomplete_init мы вызывали что-то вроде следующего:
|
1
2
|
add_action( ‘wp_ajax_{action}’, ‘my_hooked_function’ );
add_action( ‘wp_ajax_nopriv_{action}’, ‘my_hooked_function’ );
|
Первое действие запускается, когда WordPress получает AJAX-запрос с действием, заданным {action} и пользователь вошел в систему. Второе запускается, когда пользователь не вошел в систему. Это может быть особенно полезно, если вы хотите обработать только AJAX. запросить, если пользователь вошел в систему. Для наших целей мы хотим, чтобы он работал как для вошедших, так и для не вошедших пользователей, поэтому мы подключаем нашу функцию к обоим. Здесь мы определяем эту функцию обратного вызова, опять же, это идет в вашем functions.php :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function myprefix_autocomplete_suggestions(){
// Query for suggestions
$posts = get_posts( array(
‘s’ =>$_REQUEST[‘term’],
) );
// Initialise suggestions array
$suggestions=array();
global $post;
foreach ($posts as $post): setup_postdata($post);
// Initialise suggestion array
$suggestion = array();
$suggestion[‘label’] = esc_html($post->post_title);
$suggestion[‘link’] = get_permalink();
// Add suggestion to suggestions array
$suggestions[]= $suggestion;
endforeach;
// JSON encode and echo
$response = $_GET[«callback»] .
echo $response;
// Don’t forget to exit!
exit;
}
|
Давайте пройдемся по этому понемногу. Вводимые пользователем данные отправляются вместе с запросом AJAX и задаются как $_REQUEST['term'] . Мы просто используем get_posts поиска get_posts для поиска наших сообщений с этим термином.
Затем мы просматриваем каждый из возвращенных постов и для каждого строим массив предложений. Этот массив содержит заголовок поста (мы называем его « label », чтобы Autocomplete распознал его и использовал для списка предложений) и постоянную ссылку поста, чтобы при нажатии на пост пользователь перешел на эту страницу. Мы добавляем каждый массив предложений в массив предложений.
Далее мы JSON кодируем предложения и повторяем результат. Наконец, мы выходим! И мы сделали!
Дайте нам знать, что вы думаете в комментариях, и если у вас есть какие-либо предложения о том, как расширить это, мы хотели бы, чтобы вы тоже поделились ими.