Помощь начинающим веб
разработчикам

Autosubmit по клику из списка элементов автодополнения

14.01.2016

В прошлой статье мы с вами реализовали ajax автодополнение для текстового поля формы, все у нас прекрасно работало, но было одно неудобство – после выбора значения из списка автодополнения, нам приходилось бы нажимать кнопку поиск, что по сути является лишним действием для пользователя. Давайте это дело исправим и будем автоматически нажимать на кнопку, после выбора значения, а что бы наша форма имела хоть какой-то смысл, то давайте создадим какое-либо действие по сабмиту, а именно будем выводить сообщение с выбранным пользователем значением из списка автодополнения. Для данного примера, мы будем использовать модуль, написанный в предыдущей статье, скачать его можно здесь.

Приступим. Напишем функцию, которая будет показывать нам сообщение после нажатия на кнопку. Для этого, как вы наверное уже знаете, будем использовать

  1. hook_form_submit()
  1. /**
  2.  * Implements hook_form_submit
  3.  */
  4. function ajax_autocomplete_form_submit($form, &$form_state){
  5. $text = $form_state['values']['text'];
  6. drupal_set_message("Вы выбрали - $text");
  7. }

Чистим кеш сайта и проверяем работоспособность.

Показываем сообщение пользователю, после нажатия на кнопку "Поиск"

Все у нас работает – идем дальше. Теперь переходим непосредственно к реализации Autosubmit. Как вы, наверное, догадались, вся реализация будет строиться через JS, тем самым нам необходимо подключить для нашей формы дополнительный JS файл. Как это делается, думаю вы и без меня знаете. Создадим файл ajax_autocomplete_autosubmit.js и поместим его внутрь модуля в папку js. Теперь подключим данный файл, для нашей формы, а именно допишем в

hook_form()
  1. drupal_add_js(drupal_get_path('module', 'ajax_autocomplete') . '/js/ajax_autocomplete_autosubmit.js', array('group' => JS_THEME));

Хочу заметить, что в drupal_add_js - мы передали дополнительный аргумент (group => JS_THEME), который гарантирует нам подключение данного файла после подключения misc/autocomplete.js

Опять же не забываем чистить кеш сайта. Теперь осталось, лишь написать логику на JS, которая будет отслеживать , что текстовое поле заполнено через автодополнение и далее производить нажатие на кнопку. Пишем следующее в наш файл ajax_autocomplete_autosubmit.js

  1. (function ($) {
  2. Drupal.jsAC.prototype.select = function (node) {
  3. this.input.value = $(node).data('autocompleteValue');
  4. if(jQuery(this.input).hasClass('form-autocomplete')){
  5. this.input.form.submit();
  6. }};
  7. })(jQuery);

И теперь смотрим, что у нас получилось. Как вы можете заметить, мы добились того, чего хотели. Получившийся модуль, написанный нами в данной статье, можно скачать здесь.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

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