はじめに

railsを使ったウェブアプリケーションで、テキストフィールドにオートコンプリートをつけたいときに、rails4-autocompleteというgemを使うと便利。基本的な使い方はこちらの参考URLを参照。
このgemを使った際にオートコンプリートのフィールドの挙動をカスタマイズする方法を記録します。

環境

• ruby 2.2.1
• rails 4.2.3

前提

今回の実装例は、

• 外部キー「fuga_id」を持つ「hogeモデル」のフォームから
• オートコンプリートを使って「fugasテーブル」を細かい条件で検索し
• オートコンプリートが提案する文言も変更したうえでfuga_idをsubmitする場合

を想定。gemによって作られるアクションを下記のようにオーバーライドして実装すると柔軟に対応できる。

実装手順

class HogesController < ApplicationController
  autocomplete :fuga, :name

resources :hoges do
  collection do
    get :autocomplete_fuga_name
  end
end

<%= 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についても自由にかけるため、オートコンプリートで提案される候補の文言変更や挙動の調整をすることができる。

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