はじめに
railsを使ったウェブアプリケーションで、テキストフィールドにオートコンプリートをつけたいときに、rails4-autocompleteというgemを使うと便利。基本的な使い方はこちらの参考URLを参照。
このgemを使った際にオートコンプリートのフィールドの挙動をカスタマイズする方法を記録します。
環境
- ruby 2.2.1
- rails 4.2.3
前提
今回の実装例は、
- 外部キー「fuga_id」を持つ「hogeモデル」のフォームから
- オートコンプリートを使って「fugasテーブル」を細かい条件で検索し
- オートコンプリートが提案する文言も変更したうえでfuga_idをsubmitする場合
を想定。gemによって作られるアクションを下記のようにオーバーライドして実装すると柔軟に対応できる。
実装手順
app/controllers/hoges_controller.rb
class HogesController < ApplicationController
autocomplete :fuga, :name
config/routes.rb
resources :hoges do
collection do
get :autocomplete_fuga_name
end
end
app/views/hoges/_form.html.erb
<%= form_for(@hoge) do |f| %>
<%= f.autocomplete_field :fuga_name, autocomplete_fuga_name_hoges_path, id_element: '#hoge_fuga_id' %>
<%= f.hidden_field :fuga_id %>
<%= f.submit '登録' %>
<% end %>
のようにすれば、単純にfugaのnameを入れるとマッチするfugaデータが出てきてformからsubmitできる。
ここで、
- 検索条件を細かく指定したい
- 検索対象カラムを増やしたい
- 検索を複数テーブルをjoinしておこないたい
- オートコンプリートで提案される候補の文言をカスタマイズしたい
などの場合は、メソッドをオーバーライドして実装する。
inputに入力した文字列はtermというパラメータとして渡ってくる挙動。
それを引数として自分で定義したscopeに渡すこともできるし、返り値のjsonについても自由にかけるため、オートコンプリートで提案される候補の文言変更や挙動の調整をすることができる。
app/controllers/hoges_controller.rb
class HogesController < ApplicationController
autocomplete :fuga, :name
def autocomplete_fuga_name
term = params[:term]
fugas = Fuga.scope_name(term)
render json: fugas.map { |fuga| { id: fuga.id, label: fuga.method_name, value: fuga.method_name } }
end