Автозаполнение текстового поля

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


Решение

В Rails имеется удивительно простой в использовании элемент управления с ав­тозаполнением, который является частью JavaScript-библиотеки script.aculo.us. С его помощью можно вполне справиться с задачей и получить привлекательное, современное поле поиска менее чем в десяти строчках кода.
Представьте, что у вас есть приложение контактная книга и желание бы­строго поиска контакта по имени. Предположим, что все необходимые таб­лицы базы данных и классы модели уже созданы, а миграция Active Record для создания таблиц выглядит следующим образом:

  1. class CreateContacts < ActiveRecord::Migration
  2. def self.up
  3. create_table :contacts do |t|
  4. t.column  :name, :string
  5. t.column :email, :string
  6. t.column :phone, :string
  7. t.column :address_line1, :string
  8. t.column :address_line2, :string
  9. t.column :city, :string
  10. t.column :state, :string
  11. t.column :country, :string
  12. t.column :postal_code, :string
  13.  
  14. t.timestamps
  15. end
  16. end
  17.  
  18. def self.down
  19. drop_table :contacts
  20. end
  21. end

Теперь давайте создадим для поиска новый контроллер и представление:
Теперь, чтобы создать новое представление для контроллера поиска, давайте отредактируем файл search.rhtml, в котором и будет реализовано наше модное авто­заполнение. Как видите, для этого много кода не потребуется:

  1. <%= javascript_include_tag :defaults %>
  2. <%= text_field_with_auto_complete :contact, :name %>

Первое, что бросается в глаза, — строка в самом начале кода c содержимым javascript_include_tag :defaults. Про эту строку нетрудно и забыть, а потом куда сложнее понять, что случилось. Этой строкой в код включаются файлы JavaScript, осуще­ствляющие Rails-Ajax-волшебство. Без нее, в зависимости от типа используемого браузера, будет отображаться что-нибудь, начиная загадочными сообщениями об ошибке и заканчивая безжизненными формами HTML, без объяснения, что мод­ная вставка отсутствует. Это может вызвать столь сильное раздражение, что я хочу обратить ваше внимание на следующий лозунг:

НЕ ЗАБЫВАЙТЕ ВКЛЮЧАТЬ В КОД ФАЙЛЫ JAVASCRIPT!

Теперь, когда магические заклинания включены в код, мы можем их вызвать:

  1. <%= text_field_with_auto_complete :contact, :name %>

Это приведет к тому, что Rails создаст текстовое поле со всеми необходимыми JavaScript-прикреплениями. Так же, как и большинство других помощников Rails, метод text_field_with_auto_complete( ) не содержит ничего такого, что нельзя было бы сделать самостоятельно.
Но если вам когда-либо приходилось прикреплять JavaScript-обработку собы­тий к HTML-элементам, вы поймете, какую реальную пользу приносят помощ­ники.
Все, что клиент набирает, подключено к коду JavaScript, который наблюдает за текстовым полем и, по мере того как пользователь набирает текст в браузере, посылает запросы серверу. И еще один, завершающий, ингредиент — надо сооб­щить серверу, что следует делать при получении этих запросов. Привязка кли­ентских запросов к модели приложения весьма тривиальна. Она осуществляется двумя строками, включенными в SearchController:

  1. class SearchController < ApplicationController
  2. protect_from_forgery :o nly => [:create, :delete, :update]
  3. auto_complete_for :contact, :name
  4.  
  5. …

Второй строкой Rails (первую я расписывал на этом топике) предписывается динамическая генерация метода действия под названием auto_complete_for_contact_name( ), который будет осуществлять поиск объектов, соответствующих введенному тексту, и отправлять результаты. В брау­зере эти результаты будут попадать в innerHTML, расположенный в <ам>-элементе DHTML-автозаполнения, создавая привлекательный всплывающий эффект.

02. сентября 2008 by Alexey Vasiliev
Categories: Ajax, javascript, Ruby on Rails | Tags: , , | 4 комментария

Comments (4)

  1. Поискоый робот says 19 октября 2008 at 20:10

    Здравствуйте. Такой вопрос: есть множество скриптов добавления страницы в закладки, которые берут 2 параметра: url и title и подставляют их в ссылку, отправляющуюся, например, на memori.ru. То есть по нажатии кнопки мы попадаем на страницу memori с формой добавления, в которой url и title уже заполнены.
    Возможно ли с помощью javascript заставить те же url и title точно так же по нажатию соответствующей кнопки автоматически вставляться в форму отправки email редактору сайта?
    (email один и тот же, вставляется только url и title)

  2. leopard says 20 октября 2008 at 8:34

    Конечно. Достаточно только передать и этот параметр.

  3. Поисковый робот says 27 октября 2008 at 16:19

    Я имел в виду следующее: например, нужно передать эти параметры (url и title) в виде ссылки:
    http://www.ezcontactr.com/write/b297d?subject=http://url.ру&message=крутая_ссылка

    Как добиться, чтобы поля заполнялись по нажатию на такую ссылку?

  4. leopard says 29 октября 2008 at 23:52

    Ну можно сделать, что б страница формировала на сервере с GET запроса тот же Javascript (или передать их в функцию) и запускала его на клиенте.