Автозаповнення під час пошуку по сайту на WordPress

Функція get_search_form() може бути використана для відображення форми пошуку на вашому сайті. Вона робить свою справу, але дуже проста. Вона поставляється з WordPress починаючи з версії 3.3, проте є інструмент, який може зробити її використання набагато простіше. У цьому посібнику ми покажемо вам, як додати Автозаповнення jQuery до вашої форми пошуку.

Цей посібник передбачає, що ваша тема використовує 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 вашої теми або залишити в окремому файлі, зареєструвавши його, як зазначено тут. Нам знадобиться також деякий наявність, який я назву myacsearch.js і зберігатиму в папці js моєї теми.
• Зачепить наш JavaScript та CSS — ми хочемо додати наш стиль та наявність тоді (і лише тоді), коли з'являється форма пошуку. Фільтр get_search_form спрацьовує, коли це відбувається, і ми використовуємо це для того, щоб вписати в чергу наші скрипти та стилі.
• Ajax actions — нам потрібно додати виклик функції для обробки запиту та повернення результатів, коли WordPress отримає наш action через AJAX. Щоб зробити це, ми використовуємо зачіпки wp_ajax_{action} и wp_ajax_nopriv_{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 на стороні сервера - але він нам потрібен у нашому наявність файл. Це можна зробити за допомогою 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';

Це дозволить нам ідентифікувати запит, виконати пошук та повернути результати. Далі ми застосуємо функцію Автозаповнення до форми пошуку (тут ми використовуємо атрибут 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 визначає кількість символів, які користувач повинен ввести, перш ніж доповнення авто почне працювати.

Ми укладемо все це у контейнер .готовий, так що все запуститься, тільки коли сторінка повністю завантажиться. Повний 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 буде спрацьовувати. У цій функції ми додаємо в чергу скрипти та стилі, які потрібні нам для Автозаповнення. Нам не потрібно завантажувати jQuery або Автозаповнення Прямо 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. Тут ми визначимо цю функцію виклику, знову ж таки, у файлі 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', Щоб Автозаповнення розпізнав його і використовувало для списку припущень) і постійне посилання на пост, щоб натиснути на пост користувача на необхідну сторінку. Ми додаємо кожен масив припущень до масиву припущень.

Далі, ми перекодуємо припущення за допомогою JSON та видаємо результат. Нарешті, все ми закінчили!

Повідомте нам ваші думки у коментарях. Якщо у вас є якісь припущення щодо того, як розширити це керівництво, ми будемо раді, якщо ви поділитеся ними.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

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