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

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

リンク デモ

紹介

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

導入

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

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

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

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

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

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

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

最後に

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