Help us understand the problem. What is going on with this article?

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

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

NishidaRyu416
TransX株式会社のCEO兼エンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away