xandeadx.ru
Блог друпал девелопера

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

31.01.2012

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

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

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
Похожие записи

Комментарии

Ch
01.02.2012, 09:16

Код из helper.js (всего 143 байта) можно оформить как inline скрипт.

Гера
01.02.2012, 09:29

> Код из helper.js (всего 143 байта) можно оформить как inline скрипт.

А зачем это делать, объясните, пожалуйста?

kalabro
01.02.2012, 10:10

Гера, чтобы потом через месяц или два искать, где же этот js-код таки :)

Ch
01.02.2012, 10:26

Чтобы не плодить лишних файлов.

$form['#attached']['js'][] = array('data' => 'jQuery(function(){jQuery(\'input[name="textfield"]\').autocomplete({source: Drupal.settings.basePath + "test/autocomplete"});});', 'type' => 'inline');
slivorezka
29.01.2013, 14:08

А как реализовать, выдачу HTML на результате autocomplete?

kreaton
23.07.2013, 13:23

Кстати, хороший вопрос по поводу хтмла в выдаче результатов. как это можно сделать?

xandeadx
23.07.2013, 13:30

погуглить по фразе "jquery ui autocomplete html tags"

Гость
05.02.2014, 17:14

Итересно, а как сделать, что если уже есть выбранное поле, то оно не должно показывать в списке который предлагается? Ну то есть по сути, исключить из списка некие еллементы?

Антон
23.05.2014, 11:06

Как привязать эту конструкцию к таксономии я примерно представляю.

А вот как сделать так, что

при вводе в строку текста, если он отсутствует в списке (такого термина таксономии не существует), добавлять новый термин?

Уважаемые Гуру Друпала, подскажите, пожалуйста!!!

Антон
23.05.2014, 11:38

Эту статью я смотрел.

Мне нужно заменить стандартное поле с автозаполнением из таксономии, т.к. у меня возникла проблема с кавычками, которую решить никак не удается.

В общем мне нужно сделать возможность добавлять термин при создании и редактировании материала и закреплять этот материал за термином.

Как прикрутить этот код http://xandeadx.ru/blog/drupal/388 к submit формы добавления/сохранения материала?

Александр
23.07.2014, 00:17

Как передать в функцию jqueryui_autocomplete_autocomplete() строку вводимую в поле формы?

Не совсем понимаю почему используется $_GET['term']... Почему именно 'term'... не нашел вашем коде упоминание о термине... Поле же именуется как 'title'.

Заранее спасибо за подсказку.

Лёлёлёшка
01.11.2015, 14:03

А как вызвать свой код после выбора элемента? Пишу в select функцию, но она не работает!

select: function(event, ui) {
		$.ajax({
			type:'POST',
			url: Drupal.settings.basePath + "fields/newPage",
			dataType:'json',
			data:"title="+JSON.stringify(ui.item ? ui.item.value.title : ''),
			success: function(data){
				console.log(data);
			}
			
});
        return false;
      }
Евгений
09.03.2016, 09:43

А как подобное прикрутить к полю из field collection?

Евгений
09.03.2016, 10:05

а еще я вижу:

Notice: Undefined index: term в функции jqueryui_autocomplete_autocomplete() (строка 40 в файле /sites/all/modules/jqueryui_autocomplete/jqueryui_autocomplete.module).
Notice: Undefined index: term в функции jqueryui_autocomplete_autocomplete() (строка 40 в файле /sites/all/modules/jqueryui_autocomplete/jqueryui_autocomplete.module).
Notice: Undefined index: term в функции jqueryui_autocomplete_autocomplete() (строка 40 в файле /sites/all/modules/jqueryui_autocomplete/jqueryui_autocomplete.module).

Добавить комментарий