アカハヤの技術ブログ

クズと天才は紙一重 twitter:@akahaya719

railsで検索可能なセレクトボックスを実装

select2-railsというgemを使用し、

検索可能なセレクトボックスを作成することができます。

 

Gemfileに以下を記述してbundle installを実行。

gem 'select2-rails'

 

application.jsに以下を追加

//= require select2

 

application.cssに以下を追加

*= require select2

 

select2を使用したいところに、以下のjsを追加

$('フォームのidまたはclass').select2({
 width: 400,
 allowClear: true
});

 

allowClear: trueをつけると、

×ボタンでセレクトボックスで選択したものを削除できる。

 

allowClear: trueがうまく動かなかったので

以下jsを追加して、無理やり動かした

$('.select2-selection__clear').on('click', function(){
$('フォームのidまたはclass').val(null).trigger("change");
})