xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

Стандартный способ создания поля с автодополнением достаточно ограничен, например нет возможности вызвать свой код после выбора элемента, или вывести список в каком-нибудь изощренном виде. Но выход есть, это 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
Похожие записи

Комментарии RSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Или если есть возможность подскажите, как решить проблему из этого топика? http://www.drupal.ru/node/109218

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

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

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

А как вызвать свой код после выбора элемента? Пишу в 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;
      }

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

а еще я вижу:

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).

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании