Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

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

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
1
Help us understand the problem. What are the problem?