Сегодня мы займемся реализацией Ajax автодополнением для текстового поля формы в Drupal 7. Скорее всего, вы не раз уже такое встречали на различных сайтах. Например, нечто подобное используется во всех популярных поисковых системах, при вводе какого-либо запроса в поисковую строку, что значительно увеличивает взаимодействие пользователя с сайтом.

Для начала, давайте определимся с задачей. Нам необходима форма, с текстовым полем, которая при вводе текста будет предлагать нам соответствующие данному запросу заголовки нод.
Приступим, создадим форму и выведем ее в блок. Как это сделать уже не раз писалось на этом сайте, поэтому я выложу уже готовый код модуля. Кстати, мой модуль будет называться ajax_autocomplete
Файл ajax_autocomplete.info
name = Ajax Autocomplete description = Формирует автодополнения для формы package = Other core = 7.x version = 7.x-1.0
<?php /** * Implements hook_block_info() */ function ajax_autocomplete_block_info(){ 'info' => t('Form Ajax Autocomplete'), 'cache' => DRUPAL_CACHE_PER_ROLE, ); return $blocks; } /** * Implements hook_block_view() */ function ajax_autocomplete_block_view($delta='') { if($delta == 'ajax_autocomplete' ){ $output = drupal_get_form('ajax_autocomplete_form'); $block['subject'] = t('Form Ajax Autocomplete'); $block['content'] = $output; } return $block; } /** * Implements hook_form() */ function ajax_autocomplete_form(){ '#type' => 'textfield', '#title' => 'Заголовок ноды' ); '#type' => 'submit', '#value' => 'Поиск' ); return $form; }
Включаем модуль, выводим блок в необходимый нам регион и смотрим результат.

Как мы видим форма у нас появилось, по сабмиту у нас естественно ничего не происходит, ибо это нам и не нужно в нашем примере. Теперь приступаем к реализации автодополнения.
Саму реализацию, можно разделить на несколько этапов:
- Подключить библиотеку drupal.ajax, ибо автодополнение будет работать через Ajax
- Зарегистрировать страницу, к которой будет отправляться запрос при вводе текста
- Написать ajax callback, которая будет принимать входящие данные пользователя и на основе это формировать список с подходящими по запросу заголовками нод
- «Сказать» текстовому полю, что необходимо использовать автодополнение
/** * Implements hook_init */ function ajax_autocomplete_init() { drupal_add_library('system', 'drupal.ajax'); }
/** * Implements hook_menu */ function ajax_autocomplete_menu(){ 'page callback' => 'ajax_autocomplete_search', 'type' => MENU_CALLBACK, ); return $items; }
/** * Ajax Callback */ function ajax_autocomplete_search($title){ $result = db_select('node', 't') ->condition('title', '%' . db_like($title) . '%', 'LIKE') ->execute() ->fetchAll(); foreach ($result as $row) { $matches[$row->title] = check_plain($row->title); } drupal_json_output($matches); }
Говорим текстовому полю, что необходимо использовать автодополнение, для этого дописываем текстовому полю свойство #autocomplete_path, где в качестве значения указываем путь до зарегистрированной нами страницы, в результате наше поле примет следующий вид
'#type' => 'textfield', '#title' => 'Заголовок ноды', '#autocomplete_path' => 'ajax-autocomplete', );
После чего чистим кеш сайта и смотрим результат

Как мы видим все у нас работает.
Полный код модуля:
<?php /** * Implements hook_block_info() */ function ajax_autocomplete_block_info(){ 'info' => t('Form Ajax Autocomplete'), 'cache' => DRUPAL_CACHE_PER_ROLE, ); return $blocks; } /** * Implements hook_block_view() */ function ajax_autocomplete_block_view($delta='') { if($delta == 'ajax_autocomplete' ){ $output = drupal_get_form('ajax_autocomplete_form'); $block['subject'] = t('Form Ajax Autocomplete'); $block['content'] = $output; } return $block; } /** * Implements hook_form() */ function ajax_autocomplete_form(){ '#type' => 'textfield', '#title' => 'Заголовок ноды', '#autocomplete_path' => 'ajax-autocomplete', ); '#type' => 'submit', '#value' => 'Поиск' ); return $form; } /** * Implements hook_init */ function ajax_autocomplete_init() { drupal_add_library('system', 'drupal.ajax'); } /** * Implements hook_menu */ function ajax_autocomplete_menu(){ 'page callback' => 'ajax_autocomplete_search', 'type' => MENU_CALLBACK, ); return $items; } /** * Ajax Callback */ function ajax_autocomplete_search($title){ $result = db_select('node', 't') ->condition('title', '%' . db_like($title) . '%', 'LIKE') ->execute() ->fetchAll(); foreach ($result as $row) { $matches[$row->title] = check_plain($row->title); } drupal_json_output($matches); }
Скачать написанный в примере модуль можно здесь.