Проблема
Вам наверняка приходилось пользоваться изящной работой элементов управления, обладающих свойством автозаполнения. Вы точно знаете, стоит только приступить к вводу данных, как приложение еще до завершения ввода начнет динамический подбор соответствий. Это был самый впечатляющий писк моды в девяностых годах прошлого столетия.
Для нового, сногсшибательного приложения вполне естественно желание оформить стильный поиск.
Решение
В Rails имеется удивительно простой в использовании элемент управления с автозаполнением, который является частью JavaScript-библиотеки script.aculo.us. С его помощью можно вполне справиться с задачей и получить привлекательное, современное поле поиска менее чем в десяти строчках кода.
Представьте, что у вас есть приложение контактная книга и желание быстрого поиска контакта по имени. Предположим, что все необходимые таблицы базы данных и классы модели уже созданы, а миграция Active Record для создания таблиц выглядит следующим образом:
Теперь давайте создадим для поиска новый контроллер и представление:
Теперь, чтобы создать новое представление для контроллера поиска, давайте отредактируем файл search.rhtml, в котором и будет реализовано наше модное автозаполнение. Как видите, для этого много кода не потребуется:
Первое, что бросается в глаза, — строка в самом начале кода c содержимым javascript_include_tag :defaults. Про эту строку нетрудно и забыть, а потом куда сложнее понять, что случилось. Этой строкой в код включаются файлы JavaScript, осуществляющие Rails-Ajax-волшебство. Без нее, в зависимости от типа используемого браузера, будет отображаться что-нибудь, начиная загадочными сообщениями об ошибке и заканчивая безжизненными формами HTML, без объяснения, что модная вставка отсутствует. Это может вызвать столь сильное раздражение, что я хочу обратить ваше внимание на следующий лозунг:
НЕ ЗАБЫВАЙТЕ ВКЛЮЧАТЬ В КОД ФАЙЛЫ JAVASCRIPT!
Теперь, когда магические заклинания включены в код, мы можем их вызвать:
Это приведет к тому, что Rails создаст текстовое поле со всеми необходимыми JavaScript-прикреплениями. Так же, как и большинство других помощников Rails, метод text_field_with_auto_complete( ) не содержит ничего такого, что нельзя было бы сделать самостоятельно.
Но если вам когда-либо приходилось прикреплять JavaScript-обработку событий к HTML-элементам, вы поймете, какую реальную пользу приносят помощники.
Все, что клиент набирает, подключено к коду JavaScript, который наблюдает за текстовым полем и, по мере того как пользователь набирает текст в браузере, посылает запросы серверу. И еще один, завершающий, ингредиент — надо сообщить серверу, что следует делать при получении этих запросов. Привязка клиентских запросов к модели приложения весьма тривиальна. Она осуществляется двумя строками, включенными в SearchController:
Второй строкой Rails (первую я расписывал на этом топике) предписывается динамическая генерация метода действия под названием auto_complete_for_contact_name( ), который будет осуществлять поиск объектов, соответствующих введенному тексту, и отправлять результаты. В браузере эти результаты будут попадать в innerHTML, расположенный в <ам>-элементе DHTML-автозаполнения, создавая привлекательный всплывающий эффект.
Кросспост из моего блога
Вам наверняка приходилось пользоваться изящной работой элементов управления, обладающих свойством автозаполнения. Вы точно знаете, стоит только приступить к вводу данных, как приложение еще до завершения ввода начнет динамический подбор соответствий. Это был самый впечатляющий писк моды в девяностых годах прошлого столетия.
Для нового, сногсшибательного приложения вполне естественно желание оформить стильный поиск.
Решение
В Rails имеется удивительно простой в использовании элемент управления с автозаполнением, который является частью JavaScript-библиотеки script.aculo.us. С его помощью можно вполне справиться с задачей и получить привлекательное, современное поле поиска менее чем в десяти строчках кода.
Представьте, что у вас есть приложение контактная книга и желание быстрого поиска контакта по имени. Предположим, что все необходимые таблицы базы данных и классы модели уже созданы, а миграция Active Record для создания таблиц выглядит следующим образом:
class CreateContacts < ActiveRecord:: Migration
def self.up
create_table: contacts do |t|
t.column: name,: string
t.column: email,: string
t.column: phone,: string
t.column: address_line1,: string
t.column: address_line2,: string
t.column: city,: string
t.column: state,: string
t.column: country,: string
t.column: postal_code,: string
t.timestamps
end
end
def self.down
drop_table: contacts
end
end
* This source code was highlighted with Source Code Highlighter.
Теперь давайте создадим для поиска новый контроллер и представление:
Теперь, чтобы создать новое представление для контроллера поиска, давайте отредактируем файл search.rhtml, в котором и будет реализовано наше модное автозаполнение. Как видите, для этого много кода не потребуется:
<%= javascript_include_tag :defaults %>
<%= text_field_with_auto_complete :contact, :name %>
* This source code was highlighted with Source Code Highlighter.
Первое, что бросается в глаза, — строка в самом начале кода c содержимым javascript_include_tag :defaults. Про эту строку нетрудно и забыть, а потом куда сложнее понять, что случилось. Этой строкой в код включаются файлы JavaScript, осуществляющие Rails-Ajax-волшебство. Без нее, в зависимости от типа используемого браузера, будет отображаться что-нибудь, начиная загадочными сообщениями об ошибке и заканчивая безжизненными формами HTML, без объяснения, что модная вставка отсутствует. Это может вызвать столь сильное раздражение, что я хочу обратить ваше внимание на следующий лозунг:
НЕ ЗАБЫВАЙТЕ ВКЛЮЧАТЬ В КОД ФАЙЛЫ JAVASCRIPT!
Теперь, когда магические заклинания включены в код, мы можем их вызвать:
<%= text_field_with_auto_complete :contact, :name %>
* This source code was highlighted with Source Code Highlighter.
Это приведет к тому, что Rails создаст текстовое поле со всеми необходимыми JavaScript-прикреплениями. Так же, как и большинство других помощников Rails, метод text_field_with_auto_complete( ) не содержит ничего такого, что нельзя было бы сделать самостоятельно.
Но если вам когда-либо приходилось прикреплять JavaScript-обработку событий к HTML-элементам, вы поймете, какую реальную пользу приносят помощники.
Все, что клиент набирает, подключено к коду JavaScript, который наблюдает за текстовым полем и, по мере того как пользователь набирает текст в браузере, посылает запросы серверу. И еще один, завершающий, ингредиент — надо сообщить серверу, что следует делать при получении этих запросов. Привязка клиентских запросов к модели приложения весьма тривиальна. Она осуществляется двумя строками, включенными в SearchController:
class SearchController < ApplicationController
protect_from_forgery: only => [: create,: delete,: update]
auto_complete_for: contact,: name
...* This source code was highlighted with Source Code Highlighter.
Второй строкой Rails (первую я расписывал на этом топике) предписывается динамическая генерация метода действия под названием auto_complete_for_contact_name( ), который будет осуществлять поиск объектов, соответствующих введенному тексту, и отправлять результаты. В браузере эти результаты будут попадать в innerHTML, расположенный в <ам>-элементе DHTML-автозаполнения, создавая привлекательный всплывающий эффект.
Кросспост из моего блога
