Урок 5. Підключення jQuery Autocomplete до плагіна автокомпліту постів

public function post_autocomplete_form()
{
	$content  = '<form class="wrap-post-autocomplete" method="GET">';
	$content .= '<input type="text" name="text" class="post-autocomplete-field" placeholder="Введіть текст для пошуку">';
	$content .= '</form>';

	return $content;
}

Було б простіше інтегрувати свою логіку з нативною формою пошуку у WP, але в нашому навчальному випадку ми залишаємо все як є.

Стили плагина

У файлі стилів додаються два класи:

.post-autocomplete-field {
	width: 100%;
}

.post-autocomplete-field__loader {
	background: url('loader.gif') no-repeat center right;
}

- `.post-autocomplete-field` — розтягує інпут на всю ширину.
- `.post-autocomplete-field__loader` — відображає loader під час Ajax-запиту.

JavaScript код

У файлі `/assets/script.js` вставляємо:

jQuery(document).ready(function($)
{
	jQuery(".post-autocomplete-field").autocomplete({
		source: function(request, response) {
			jQuery(".post-autocomplete-field").addClass('post-autocomplete-field__loader');
			
			$.post(WpPostAutocomplete.ajax, {
				term: request.term,
				action: WpPostAutocomplete.action,
				security: WpPostAutocomplete.security,
			}, function(data)
			{
				if(data.success == false)
				{
					alert(data.data.message);
					return false;
				}

				response($.map(data.data, function(value) {
					return  {
						value: value.title,
						label: value.title,
					};
				}));
			}, 'json');
		},
		open: function()
		{
			jQuery(".post-autocomplete-field").removeClass('post-autocomplete-field__loader');
		},
		select: function(e, ui)
		{
			jQuery(".post-autocomplete-field").val(ui.item.value);
			jQuery('.wrap-post-autocomplete')[0].submit();
		},
		minLength: 3,
		appendTo: '.wrap-post-autocomplete',
	});
});

Тут використовується стандартний jQuery-синтаксис `autocomplete`. Пояснення важливих частин:

- Додаємо клас з preloader під час набору тексту:

jQuery(".post-autocomplete-field").addClass('post-autocomplete-field__loader');
/* так */
open: function()
{
	jQuery(".post-autocomplete-field").removeClass('post-autocomplete-field__loader');
},

- Видаляємо клас коли dropdown автокомпліта відкритий.

- Обробляємо Ajax-відповідь: запит через POST, параметр `term`, і у випадку успіху — формуємо масив:

response($.map(data.data, function(value) {
	return  {
		value: value.title,
		label: value.title,
	};
}));

- Після вибору одного з варіантів автокомпліта — встановлюємо значення у поле та сабмітимо форму:

select: function(e, ui)
{
	jQuery(".post-autocomplete-field").val(ui.item.value);
	jQuery('.wrap-post-autocomplete')[0].submit();
},

Це дозволяє перейти на сторінку результатів з пошуковим форматом за вибраним терміном.

Уся логіка — проста, але ефективна. Код уроку можна переглянути на GitHub за цим посиланням.

Список усіх уроків теми

• Урок 1. Як самостійно написати плагін для WordPress
• Урок 2. Створення шорткоду для плагіна WP Post Autocomplete
• Урок 3. Підключення стилів і JS скриптів до плагіна
• Урок 4. Робота з Ajax у плагіні автокомпліта
• Урок 5. Підключення jQuery Autocomplete до плагіна автокомпліта
• Урок 6. Відображення списку постів і пагінація