Содержимое
Сегодня будет предпоследний урок данного цикла уроков. И сегодня мы подключим автокомплит и внесем небольшие правки в ранее написанный код. Так что в конце данного урока, мы сможем увидеть список искомых постов отображаемых автокомплитом.
Для начала вернемся в наш касс «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. Вывод списка постов на страницу и пагинация