функция «предложить» для текстовых полей в приложении rails

Question

Я ищу самый простой способ реализации функции «предложить» для поля ввода текста в приложении Rails. Идея состоит в том, чтобы дополнить имена, хранящиеся в столбце базы данных, предоставляя пользователю выпадающее меню возможных совпадений при вводе.

Спасибо за любые предложения!

Answer 1

Rails делает автозаполнение в текстовом поле в стиле подсказки действительно простым, используя метод text_field_with_auto_complete.

В Rails 1.x этот метод был встроен в ActionView::Helpers::JavaScriptMacrosHelper, но для Rails 2.x он был перемещен в отдельный плагин .

Допустим, у вас есть модель с именем Post, в которой есть текстовое поле с именем title. По вашему мнению, когда вы обычно используете text_field_tag (или f.text_field), просто используйте text_field_with_auto_complete вместо:

<%= text_field_with_auto_complete :post, :title %>

Кроме того, в PostsController необходимо сделать соответствующее объявление:

class PostsController < ApplicationController
  auto_complete_for :post, :title
end

За кулисами динамически добавляется действие под названием auto_complete_for_[object]_[method] к контроллеру. В приведенном выше примере это действие будет называться auto_complete_for_post_title.

Стоит отметить, что вызов find, используемый этим автоматически сгенерированным действием, будет действовать для всех объектов модели, например, Post.find(:all, ...). Если это не то поведение, которое вам нужно (например, если вы хотите ограничить поиск определенным подмножеством Post s в зависимости от вошедшего в систему пользователя), вам нужно определить собственное действие auto_complete_for_[object]_[method] в вашем контроллере.

Answer 2

Ruby on Rails имеет доступную структуру прототипа . Эта структура используется Script.aculo.us и предоставляет элемент управления автозаполнением , который может обеспечить требуемую функциональность.

Answer 3

Вы также можете попробовать этот немного более ручной подход

# your_view.rhtml

<%= text_field 'contact', 'name', :id => 'suggest' %>
<div id='dropdown' style='display:none; z-index: 100; background: #FFFFFF'></div>

<script>
  new Ajax.Autocompleter('suggest', 'dropdown', "<%= url_for :controller => 'contacts', :action => 'suggest_name' %>") 
</script>

# contacts_controller.rb

def suggest_name
  query_string = params[:contact][:name]
  @contacts = Contact.find.all :conditions => ['name ilike ?', "%#{query_string}%"]
  render :partial => 'name_suggestions'
end

# contacts/_name_suggestions.rhtml

<ul>
<% for contact in @contacts %>
  <li><%= contact.name %></li>
<% end %>
</ul>

Answer 4

Как и в большинстве вещей в Rails, есть несколько способов сделать это. Рельсы раньше включали набор встроенных помощников автозаполнения, но эта функциональность теперь удалена в плагине auto_complete. Вероятно, это самый простой способ для вас реализовать то, что вы хотите - простую команду в контроллере, некоторые простые вещи на ваш взгляд - да-да. Чтобы использовать это решение, вам просто нужно установить плагин в свое приложение - см. на этой странице , которая говорит вам все, что вам нужно знать, чтобы установить его и начать работу.

Как отмечалось в другом ответе, при прохождении этого маршрута будут использоваться прототип и сценарии AJAX, которые поставляются в комплекте с Rails. Существуют и другие AJAX-фреймворки, в частности JQuery, которые также могут помочь вам реализовать эту функциональность, но у вас будет больше возможностей освоить их, чем просто использовать плагин.

Answer 5

РЕДАКТИРОВАТЬ: я оставлю этот ответ здесь как своего рода теоретическую точку отсчета, но похоже, что ответ autocompleter , вероятно, будет более полезным для вас:)

Отказ от ответственности: хотя я работаю в Google (в котором явно есть элементы «Предложить» в различных интерфейсах пользователя), я не рассматривал ни одного кода вокруг этой области и даже не говорил никому об аспекте на стороне клиента.

Серверный язык здесь, вероятно, не имеет значения. Важным битом является AJAX, требуемый на стороне клиента.

Я полагаю, что у вас есть таймер примерно на 1 секунду (эксперимент по поиску подходящего места), который сбрасывается каждый раз, когда пользователь вводит нажатие клавиши в текстовое поле, и отменяется, если пользователь уходит от текстового поля. Если таймер срабатывает, заставьте его запустить запрос AJAX. Запрос AJAX будет содержать то, что пользователь набрал до сих пор. Ответом AJAX должен быть список предложений и исходный текст запроса.

Если при возврате ответа AJAX текст в текстовом поле остается таким же, как поле в ответе (т. Е. Пользователь не печатал с тех пор), и если текстовое поле по-прежнему имеет фокус, тогда предложите раскрывающийся список. (Должны быть сотни примеров страниц о комбинированных списках HTML, чтобы сделать эту сторону вещей.)

Все, что нужно серверу, - это ответить на запрос AJAX, выполнив поиск и соответствующим образом отформатировав ответ - это намного проще, чем на стороне клиента!

Надеюсь, это поможет - извините, что у меня нет примера кода, но я подозреваю, что он довольно сложный, и я не являюсь разработчиком JavaScript.