Поле с автодополнением при помощи jQuery UI Autocomplete

Стандартный способ создания поля с автодополнением достаточно ограничен, например нет возможности вызвать свой код после выбора элемента, или вывести список в каком-нибудь изощренном виде. Но выход есть, это jQuery UI Autocomplete, который входит в ядро Drupal 7.

Ниже, пример создания поля с автодополнением по заголовкам нод при помощи jQuery UI Autocomplete:

jqueryui_autocomplete.module:
/**
 * Implements hook_menu()
 */
function jqueryui_autocomplete_menu() {
  $items['test/form'] = array(
    'page callback' => 'drupal_get_form',
    'page arguments' => array('jqueryui_autocomplete_test_form'),
    'access arguments' => array('access content'),
  );
  $items['test/autocomplete'] = array(
    'page callback' => 'jqueryui_autocomplete_autocomplete',
    'access arguments' => array('access content'),
  );
  return $items;
}
 
/**
 * Form builder
 */
function jqueryui_autocomplete_test_form() {
  $form['title'] = array(
    '#type' => 'textfield',
    '#title' => 'Title',
  );
 
  $form['#attached']['library'][] = array('system', 'ui.autocomplete');
  $form['#attached']['js'][] = drupal_get_path('module', 'jqueryui_autocomplete') . '/jqueryui_autocomplete.js';
 
  return $form;
}
 
/**
 * Menu callback
 */
function jqueryui_autocomplete_autocomplete() {
  $titles = db_select('node', 'n')
    ->fields('n', array('title'))
    ->condition('n.title', '%' . db_like($_GET['term']) . '%', 'LIKE')
    ->execute()
    ->fetchCol();
 
  drupal_json_output($titles);
}

jqueryui_autocomplete.js:

(function ($) {
 
  Drupal.behaviors.jqueryui_autocomplete = {
    attach: function (context, settings) {
      $('input[name="title"]', context).autocomplete({
        source: Drupal.settings.basePath + 'test/autocomplete'
      });
    }
  };
 
}(jQuery));

Написанное актуально для
Drupal 7
Теги:
jquery ui, работа с формами
Добавлено: 30 Июля 2018 07:32:11 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...