Edited at

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

More than 1 year has passed since last update.


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、よりは高性能だと思うので、使っていただけると嬉しい。