LoginSignup
8
8

More than 5 years have passed since last update.

rails3-jquery-autocomplete を使ってフォームの値を連動して変更させる

Last updated at Posted at 2013-07-06
  • jQuery とか Ajax とかの原理をいまいち分かってないから,こういう便利なものに頼らざるを得ないんだよね…
  • 'rails3-jquery-autocomplete' って名前だが, Rails4 でも問題なく使える.

gem 'rails3-jquery-autocomplete', git: 'https://github.com/francisd/rails3-jquery-autocomplete'

面倒だからサンプルはすべて自分のアプリから抜粋.

1. 使用するフォームのコントローラーで補完したいモデル・カラムを宣言する.

sbizs_controller.rb
class SBizsController < ApplicationController
  autocomplete :building, :name, :full => true, :extra_data => [:default_client_id, :default_client_name]

end
  • :extra_data でフィールドに入れたい Building モデルのカラムを指定する.
  • SQLでデータを直接引っ張ってるっぽいので building.rb で定義した仮想カラムは使えない.

2. フォームで autocomplete_field_tag を使う.

form.html.erb

<%= autocomplete_field_tag :building_name, @s_biz.building.try(:name), autocomplete_building_name_s_bizs_path, :id_element => "#s_biz_building_id", :update_elements => {:default_client_id => "#s_biz_sale_attributes_client_id", :default_client_name => "#s_biz_sale_attributes_client_name"}, :required => true %>
<%= f.hidden_field :building_id, :value => @s_biz.building.try(:id) %>

  • 肝は :update_elements で,ハッシュで :(extra_data で登録したカラム) => "(値を更新するフィールドのセレクタ)" で指定している.複数指定可能.
  • ちなみにこの s_biz の 持っているカラムは building_id なので実際にレコードに使用されているのは 下の hidden_field のみ.上の autocomplete_field_tag の :id_element を用い補完されたレコードの id で更新している.…こんな回りくどいことする必要あるのかな?
8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8