acts-as-taggable-on と tag-it でタグの補完入力(Rails)

こんな感じのやつを作りました。
　
　
使うのは以下です。
タグのjQueryプラグインはいろいろありますが、tag-it を選択した理由は自動補完機能が付いているからです。

• acts-as-taggable-on
• tag-it

ざっくり

acts-as-taggable-on は公式を参照すれば良いので省略。
mbleigh/acts-as-taggable-on: A tagging plugin for Rails applications that allows for custom tagging along dynamic contexts.

tag-it は、jQuery-UIを利用するので以下を追加してbundle。

# Gemfile
gem "jquery-ui-rails"

続いてtag-it ですが、js/css をダウンロードして以下に配置します。
vendro/assets以下のjavascriptsとstylesheetsに置きたくなりますが、
合わせて管理したいので、今回 vendor/assets/tag-it 以下に配置することにしました。

vendor
└── assets
    ├── javascripts
    ├── stylesheets
    └── tag-it
        ├── jquery.tagit.css
        └── tag-it.js

vendor/assets 以下のディレクトリは、 Rails.application.config.assets.paths に追加されるので 以下に追記するだけで使えます。
application.js

//= require jquery-ui/autocomplete
//= require tag-it

application.css

 *= require 'jquery-ui/autocomplete'
 *= require 'jquery.tagit'

controller
自動補完用にインスタンス変数を作成。ActsAsTaggableOn::Tag.all で全てのタグが取得できます。

@all_tag_list = ActsAsTaggableOn::Tag.all.pluck(:name)

view
複数の値がある場合は、デフォルトカンマ区切りなのでvalueで値を指定します。
jsでタグリストを扱えるように、一旦viewに出力します。

      <div class="form-group">
        <%= f.label :tag_list, "キーワード", class: "col-md-2 control-label" %>
        <div class="col-md-10">
          <%= f.text_field :tag_list, value: @article.tag_list.join(',') %>
        </div>
      </div>


<%= javascript_tag do %>
var myProject = {
  all_tag_list: <%= raw @all_tag_list %>
};

js
singleField で複数値持つことと、availableTags で自動補完できるようにします。

$(document).on 'ready page:load', ->
  $('#article_tag_list').tagit
    singleField: true,
    availableTags: myProject.all_tag_list