更新日: 2015年9月2日
Rails

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

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

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

gem インストール

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

Gemfile

gem 'jquery-rails'
gem 'jquery-ui-rails'

1 2	gem 'jquery-rails' gem 'jquery-ui-rails'


$ bundle install

$ bundle install

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.

joliss/jquery-ui-rails

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

app/assets/javascripts/application.js

//= require jquery-ui/autocomplete

1	//= require jquery-ui/autocomplete

app/assets/stylesheets/application.css

*= require jquery-ui/autocomplete

1	*= require jquery-ui/autocomplete

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

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

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

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

app/views/users/new.html.erb

<%= form_for(@user) do |f| %>
  # ...
  <%= f.text_field :address, id: "user_address_field" %>
  # ...
<% end %>

<%= form_for(@user) do |f| %>

# ...

<%= f.text_field :address, id: "user_address_field" %>

# ...

<% end %>

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

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

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

app/models/address.rb

class Address < ActiveRecord::Base
  # ...

  scope :autocomplete, ->(term) { where("name LIKE ?", "#{term}%").order(:name) }

  # ...
end

class Address < ActiveRecord::Base

# ...

scope :autocomplete, ->(term) { where("name LIKE ?", "#{term}%").order(:name) }

# ...

end

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

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

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

app/controllers/users_controller.rb

class UsersController < ApplicationController
  # ...

  def autocomplete_address
    address_suggestions = Address.autocomplete(params[:term]).pluck(:name)
    respond_to do |format|
      format.html
      format.json {
        render json: address_suggestions
      }
    end
  end

  # ...
end

class UsersController < ApplicationController

# ...

def autocomplete_address

address_suggestions = Address.autocomplete(params[:term]).pluck(:name)

respond_to do |format|

format.html

format.json {

render json: address_suggestions

}

end

# ...

end

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

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

config/routes.rb

get 'users/autocomplete_address/:term' => 'users#autocomplete_address'

1	get 'users/autocomplete_address/:term' => 'users#autocomplete_address'

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

$ ->
  $("#user_address_field").autocomplete
    source: (req, res) ->
      $.ajax
        url: "/users/autocomplete_address/" + encodeURIComponent(req.term) + ".json",
        dataType: "json",
        success: (data) ->
          res(data)
    ,
    autoFocus: true,
    delay: 300,
    minLength: 2

$ ->

$("#user_address_field").autocomplete

source: (req, res) ->

$.ajax

url: "/users/autocomplete_address/" + encodeURIComponent(req.term) + ".json",

dataType: "json",

success: (data) ->

res(data)

autoFocus: true,

delay: 300,

minLength: 2

これだけのコードで、後は 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 の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング