bootstrap-tagsというプラグインを使う~tag-itが使えない人へ〜

※中学生の頃の記事なので読みにくいです。すみません。(ちなみに、Rails系の記事全てその年代なので共通して酷いです)

Railsでbootstrap-tagsとういう、bootstrapプラグインを使う

リンク
デモ

紹介

・SCSSを使って書かれている、bootstrapベースのため、tag-itなどjquery-uiベースのものと異なり競合が起きない
・同じようなものとして、bootstrap-tags-inputがあるがこれには、標準でオートコンプリート機能がない。しかし、このbootstrap-tagsには搭載されてる。
素晴らしい！！

導入

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require nested_form_fields
//= require jquery-ui
//= require bootstrap-tags
//= require_tree .

scss版があるので、scss版を選んだ

application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "application_helper";
@import "bootstrap-tags";

XXX.coffee

$ ->
  Tags.bootstrapVersion = '3'
  $('#small').tags
    tagSize: 'sm'
    suggestions: [
      'alpha'
      'bravo'
      'charlie'
      'delta'
      'echo'
      'foxtrot'
      'golf'
      'hotel'
      'india'
    ]
    tagData: [
      'juliett'
      'kilo'
    ]
  return

XXX.erb

<div id="XXX"></div>

リンクを見て貰えばわかると思うが一応解説

$('#XXX').tags
id(XXX)に、対してタグを設置できる
Tags.bootstrapVersion = '3'
は、bootstrapのバージョン指定可能2~3までのはず
tagData
は、予め、入力された状態のタグを指定可能
suggestions
は、オートコンプリートのデータgonなどを使って、より拡充可能
tagSize: 'sm'
は、タグのサイズ

最後に

あんまり情報がないので、英語でもRailsに導入した例が見つからなかったんで、書きました。
情報が、少ないですが、bootstrap-input-tags、よりは高性能だと思うので、使っていただけると嬉しい。