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

Сегодня будет предпоследний урок данного цикла уроков. И сегодня мы подключим автокомплит и внесем небольшие правки в ранее написанный код. Так что в конце данного урока, мы сможем увидеть список искомых постов отображаемых автокомплитом.

Для начала вернемся в наш касс «WpPostAutocomplete», и внесем правки в шорткод. А именно переименуем тег DIV на FORM с добавлением дополнительных атрибутов. В итоге мы получим следующее:

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 — прелоадер, добавляется к форме поиска в период аякс запроса и ожидания ответа от сервера.

JavaScript код

Открываем файл JS скриптов по адресу «/wp-content/plugins/wp-post-autocomplete/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',
	});
});

Здесь мы можем найти стандартный код Autocomplete от jQuery. Но немного поясню.

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

Код выше, используется в момент ввода текста (после третьего символа), и заканчивается в тот момент когда был получен ответ (а точнее раскрыт автокомплит) от сервера с искомыми данными.

Для получения данных для списка автокомплита, используем аякс-пост запрос с передачей в него искомой фразы (пост-переменная «term»). В случае удачного ответа сервера, мы формируем список с помощью функции «response», следующим образом:

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

А функция «select»:

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

Срабатывает в момент клика, по одному из элементов автокомлита. В момент клика, мы перейдем на страницу с постами в которых встречалась выбранная нами фраза.
На этом все. А код урока можно найти по этой ссылке.

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

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