rails3-jquery-autocompleteで入力補完機能（オートコンプリート）を実装する

Rails

rails3-jquery-autocompleteを利用して

  • オートコンプリートで入力補助
  • DBにはそのオブジェクトのidを保存

を実装しました。

環境

rails3-jquery-autocompleteですが、rails 4.2.3でも動作しました。

インストール

以下をGemfileに追記してbundle install.

gem 'rails3-jquery-autocomplete'

インストール

$ rails generate autocomplete:install

application.jsに以下追記する

//= require jquery-ui
//= require autocomplete-rails

実装

Itemを登録する場面で、カテゴリをオートコンプリートで入力するような場合です。
（すでにCategoryモデルは作成してある前提）

routes.rb

resources :items に、autocomplete用のルートを追加します。

  resources :items do
    get :autocomplete_category_name, :on => :collection
  end
Cotroller

ItemsControllerに以下を追記します。

class ItemsController < ApplicationController
  autocomplete :category, :name, full: true
  ...
View

Itemの_form.html.erbなど

<%= form_for @item do |f| %>

        <%= f.autocomplete_field :name, autocomplete_category_name_items_path,
                 required: true, :id_element => '#item_category_id'  %>
        <%= f.hidden_field :category_id %>

<% end %>

これで完成！簡単です。

課題

  • 入力フィールドに2文字いれないと検索されないっぽいです。

  • 候補リストのUIをもうちょっと改善したい。

参考

crowdint/rails3-jquery-autocomplete · GitHub