Rails/jQuery UI AutocompleteでDBデータからオートコンプリート

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Rails でオートコンプリート機能を実装する機会があり、jQuery UI Autocomplete を使って実現したので備忘録メモ。オートコンプリート機能とは、Google の検索窓でも表示されるような、入力済みの文字列を元に候補のメニューを表示して入力を補完してくれる機能です。Rails 用には jquery-ui-rails という gem があるので、それを利用させて頂きました。

Autocomplete | jQuery UI
joliss/jquery-ui-rails

Ajax による通信で、サーバーのDBテーブルからオートコンプリートの候補を取得して表示します。

— 環境 —
Rails 4.1.6
jquery-ui-rails 5.0.5

スポンサーリンク

gem インストール

まずは必要となる jquery-rails, jquery-ui-rails の gem をインストールします。

Gemfile

Asset Pipline の manifest でファイルを require

続いて、Asset Pipline の manifest で、必要なファイルを require する設定を行う。ここで、jquery-ui-rails の GitHub の readme を読んだところ…

Require Specific Modules

The jQuery UI code weighs 51KB (minified + gzipped) and takes a while to execute, so for production apps it’s recommended to only include the modules that your application actually uses.

とありましたので、オートコンプリート機能に必要となる、jQuery UI Autocomplete のモジュールのみを require するように設定しました。

app/assets/javascripts/application.js

app/assets/stylesheets/application.css

Rails の Asset Pipline や manifest については以下を参照。

RailsのAsset Pipelineの理解とgemで管理しないJavaScriptライブラリの配置 | EasyRamble

ビューのフォームでオートコンプリートさせるフィールドに id を付与

以降、User モデルのフォームで address(住所)のフィールドをオートコンプリートさせたい場合の例として説明します。まずは、ビューのファイルを作成。

app/views/users/new.html.erb

後で書く JavaScript(CoffeeScript)で利用するため、address フィールドに id を指定しておきます。ここでは、user_address_field という id にしました。

モデルにオートコンプリートの補完候補を絞り込む scope を書く

Address というモデルがあり、addresses テーブルに住所のマスターデータ的な情報が格納されていると前提します。addresses テーブルの name(住所名)カラムに候補となる住所の名前が格納されているとする。そして、この addresses テーブルの name カラムから、オートコンプリートの補完候補を引っ張ってこれるようにします。そのための scope を Address モデルに追加します。

app/models/address.rb

LIKE 検索で、先頭一致の文字列で絞り込めるようにした。

コントローラーとルーティング

json フォーマットで絞り込んだ補完候補を出力するようにして、それを Ajax 通信で読み込むようにします。コントローラー(UsersController)に、オートコンプリートの候補を絞り込んで json のフォーマットでレンダリングするメソッドを作成します。

app/controllers/users_controller.rb

params[:term] に address フィールドに入力された文字列が入って渡ってくる寸法です。

続いてルーティング。get メソッドで params[:term] のパラメータを受け取れるようにルーティングします。

config/routes.rb

jQuery UI Autocomplete 用のコードを CoffeeScript で作成、Ajax で補完候補の json データを取得

ビューのフォーム内の address フィールドに付与した user_address_field の id を用いて、オートコンプリートが働くようにします。jQuery UI Autocomplete 用のコード自体は簡単です。source: で ajax により通信して、json データのリクエストを行うように書いています。

app/assets/javascripts/autocomplete_user_address.js.coffee

これだけのコードで、後は jquery ui autocomplete が良しなに計らってくれます。

autoFocus: 候補メニューの最初の候補に自動フォーカス
delay: 入力されて検索実行までのディレイ時間
minLength: 候補表示するための最低の入力文字数

その他のオプションについては、以下を参考。

Autocomplete Widget | jQuery UI API Documentation

以上で、Ajax 通信によりサーバーの DB データから候補を取得して、オートコンプリート機能を実現できました。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!