Автозаполнение при поиске по сайту на WordPress

Функция get_search_form() может быть использована для отображения формы поиска на вашем сайте. Она делает свое дело, но она очень простая. Она поставляется с WordPress начиная с версии 3.3, тем не менее, есть инструмент, который может сделать ее использование гораздо проще. В этом руководстве мы покажем вам, как добавить jQuery Autocomplete к вашей форме поиска.

Это руководство предусматривает, что ваша тема использует get_search_form() для отображения формы поиска и вызывает wp_footer().

Для начала давайте посмотрим на форму поиска TwentyEleven (searchform.php в вашей теме). Очень вероятно, что ваша очень похожа. Если вы не можете найти searchform.php в вашей теме, значит скорее всего используется разметка по умолчанию, которая практически идентична. Если ваша форма поиска жестко прописана кодом, я бы рекомендовал вставить ее в searchform.php и использовать для ее отображения get_search_form();

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="s"><?php _e( 'Search', 'twentyeleven' ); ?></label>
	<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. Мы собираемся зацепить за action ‘init‘ функцию, которая:

• Зарегистрирует CSS и JavaScript — нам нужна будет некоторая стилизация пользовательского интерфейса jQuery. Я собираюсь просто использовать базовые стили, но вы всегда сможете использовать свою тему для того, чтобы вид совпадал с вашим сайтом. Вы можете добавить стили в файл style.css вашей темы или оставить в отдельном файле, зарегистрировав его, как указано здесь. Нам понадобится также некоторый javascript, который я назову myacsearch.js и буду хранить в папке js моей темы.
• Зацепит наш JavaScript и CSS — мы хотим добавить наш стиль и javascript тогда (и только тогда), когда показывается форма поиска. Фильтр get_search_form срабатывает, когда это происходит, и мы используем это для того, чтобы вписать в очередь наши скрипты и стили.
• Ajax actions — нам нужно добавить вызов функции для обработки запроса и возвращения результатов, когда WordPress получит наш action через AJAX. Чтобы сделать это, мы используем зацепки wp_ajax_{action} и wp_ajax_nopriv_{action}, где {action} используется как идентификатор того action, который мы хотим выполнить (так что он должен быть уникальным). Я установлю его myprefix_autocompletesearch.

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 для отправки введенных в поисковую форму данных и возвращения совпадающих постов как пользовательских типов. Так что нам нужно дать Autocomplete URL для отправки запросов.

У WordPress есть отдельный URL, который занимается AJAX запросами, и он обозначается как admin_url( 'admin-ajax.php' ). Это дает нам URL на стороне сервера — но он нам нужен в нашем javascript файле. Это можно сделать с помощью wp_localize_script. Эта функция изначально была предназначена для помощи в локализации, но мы можем использовать ее для нашей цели. Вставьте это сразу же после регистрации своего javascript my_acsearch на шаге 1:

wp_localize_script( 'my_acsearch', 'MyAcSearch', array('url' => admin_url( 'admin-ajax.php' )));

Это определяет объект MyAcSearch, у которого есть свойство ‘url‘. Такой метод позволяет вам отправлять настройки, которые хранятся в базе данных, в javascript файл, но для наших целей нам нужен только MyAcSearch.url, который является URL, на который будет направлен наш AJAX запрос.

Шаг 3. JavaScript

Авто-заполнение jQuery поставляется с более широкой функциональностью в комплекте, но мы будем придерживаться основ. Вы можете увидеть все ее возможности на демо-странице. Данные, которые мы отправляем AJAX URL, будут включать переменную action, значение которой — идентификатор action, установленный нами на шаге 1. В нашем случае это myprefix_autocompletesearch. Так что теперь в наш javascript файл добавьте следующее:

var acs_action = 'myprefix_autocompletesearch';

Это позволит нам идентифицировать запрос, выполнить поиск и вернуть результаты. Дальше мы применим функцию Autocomplete к форме поиска (здесь мы используем атрибут ID из формы ввода):

$("#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 определяет количество символов, которые пользователь должен ввести, прежде чем автодополнение начнет работать.

Мы заключим все это в контейнер .ready, так что все запустится, только когда страница полностью загрузится. Полный javascript будет таким:

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 будет срабатывать. В этой функции мы добавляем в очередь скрипты и стили, которые нужны нам для Autocomplete. Нам не нужно загружать jQuery или Autocomplete напрямую, WordPress уже знает, что нам это нужно, и сделает это для нас.

function myprefix_autocomplete_search_form(){
	wp_enqueue_script( 'my_acsearch' );
	wp_enqueue_style( 'myprefix-jquery-ui' );
}

Все, что остается - обработать AJAX запрос.

Шаг 5. Обработка AJAX запроса

Вспомним, что в функции myprefix_autocomplete_init мы вызывали что-то вроде этого:

add_action( 'wp_ajax_{action}', 'my_hooked_function' );
add_action( 'wp_ajax_nopriv_{action}', 'my_hooked_function' );

Первый action срабатывает, когда WordPress получает AJAX запрос с action, установленным в {action}, и пользователь авторизуется.

Второй срабатывает, когда пользователь не авторизован. Это может быть полезным, если вы хотите обрабатывать только запросы от неавторизованного пользователя. В нашем случае мы хотим работать и с авторизованными, и с неавторизованными пользователями, так что мы зацепим нашу функцию за оба action. Здесь мы определим эту функцию вызова, опять таки, в вашем файле functions.php:

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"] . "(" . json_encode($suggestions) . ")";
	echo $response;

	// Don't forget to exit!
	exit;
}

Давайте еще раз оговорим один момент. То, что пользователь ввел в поле ввода, отправляется через AJAX запрос и передается через $_REQUEST['term']. Мы просто используем атрибуты поиска get_posts для поиска по нашим постам по этому запросу.

Затем мы идем по каждому из возвращенных постов, и для каждого мы составляем массив предположений. Этот массив содержит заголовок поста (мы называем его ‘label‘, чтобы Autocomplete распознал его и использовало для списка предположений) и постоянную ссылку на пост, чтобы клик на пост направил пользователя на необходимую страницу. Мы добавляем каждый массив предположений к массиву предположений.

Далее, мы перекодируем предположения с помощью JSON и выдаем результат. Наконец, все, мы закончили!

Сообщите нам ваши мысли в комментариях. Если у вас есть какие либо предположения по тому, как расширить это руководство, мы будем рады, если вы поделитесь ими.

Источник: WP.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/