Rails 3でのオートコンプリートを手軽に実現する rails3-jquery-autocomplete

rails3-jquery-autocompleteで、Rails 3でのオートコンプリートを実現するための手順。
rails3-jquery-autocompleteは、Rails 3.0以上でオートコンプリートを実現するGem。3.0.xと 3.1.xで利用可能。

■インストール
gem 'rails3-jquery-autocomplete'
bundle install

■JS
Rails3.0.xの場合
rails generate autocomplete:install
javascript_include_tag "autocomplete-rails.js"

Rails 3.1.xの場合
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails

■コントローラーの設定
Userモデルについてnameを検索対象にする場合
class UsersController < ApplicationController
autocomplete :user, :name
 ・
 ・
end

■検索オプション
デフォルトの場合は先頭からマッチするもののみ検索するが、:fullをtrueにすると文字列全体が対象になる
class UserssController < ApplicationController
autocomplete :user, :name, :full => true
 ・
 ・
end

■routes.rbの編集
resources :users do
get :autocomplete_user_name, :on => :collection
# auto_complete_モデル名_検索対象カラム名
end

■検索フォーム
form_for :user do |f|
f.autocomplete_field :user_name, autocomplete_user_name_users_path
end

■検索結果が選択されたときにカスタムイベントを実行
//#search_field_id を 検索用テキストフィールドのIDに
$('#search_field_id').bind('railsAutocomplete.select', function(event, data){
alert(data.item.id);
});

タグ:Rails
posted by digital-squad at 2011年12月15日 16時16分 | Comment(0) | TrackBack(0) | Ruby on Rails / Ruby
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/240631670
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック