Railsで検索可能なセレクトタグselect2を使う

Ruby on Railsのフォームで検索ができるselectタグを使うのに便利なJavaScriptのライブラリに『Select2』があります。このSelect2をRailsに組み込むためのGem『select2-rails』の紹介です。

🚜 インストール手順

Gemfileに次の設定を追加して、bundle installを実行してください。

# JS / Select2を使えるようにする
gem 'select2-rails'

🍄 設定手順

app/assets/javascripts/application.jsにselect2のJavaScriptを読み込む設定を追加します。
合わせて、HTMLでjs-searchableクラスを付与すると、SELECT2タグとして使えるようにします。

//= require select2

// js-selectable クラスをつけたらSELCT2タグになるようにする
$('.js-searchable').select2({
  width: 200,
  allowClear: true
});

app/assets/stylesheets/application.cssにselect2のCSSの読み込み設定を追加します。

*= require select2

Bootstrap用のCSSも容易されているので、Bootstrapを使う場合は下も追加します。

*= require select2-bootstrap

🏀 使い方

Railsのselectタグにjs-searchableタグを付けると、セレクトボックスとして動きます。

<%= f.select_tag :category_id, category_options, class: js-searchable %>

またmultiple: trueをオプションに追加すると複数選択することもできます。

<%= select :article, :tags, tags, { selected: selected_tags }, { multiple: true, name: 'article[tags]', class: 'form-control js-searchable' } %>

🤔 補足：値をJSでクリアする

JavaScriptからSelect2に設定された値をクリアするのは次のコマンドです。

$('.js-searchable').val(null).trigger("change");

😎 参考リンク

• Railsで検索可能なセレクトボックスのselect2を使う方法
• jquery - Reset select2 value and show placeholder

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍