Using select2 in ActiveAdmin by using activeadmin_addons
Tags: rails, activeadmin, select2
Published: 2020-05-28 05:10:47

---
title: Using select2 in ActiveAdmin by using activeadmin_addons
published: true
description: 
tags: Rails, activeadmin, Select2 
---


# Introduction.
When I upgraded from Rails 4.2 to 5.0->5.1, I also upgraded ActiveAdmin version.
It seems that [activeadmin-select2](https://github.com/mfairburn/activeadmin-select2), which uses select2 in ActiveAdmin, hasn't been maintained since April 2016, and
It did not work with the current ActiveAdmin 1.2 and Rails 5.1 combination.

So I decided to use [activeadmin_addons](https://github.com/platanus/activeadmin_addons), which can be handled separately by select2 in ActiveAdmin.

How to use select2 from activeadmin_addons and how to migrate from activeadmin-select2 to activeadmin_addons are described.

If you run select2 in ActiveAdmin, you can display completion like this

![](https://raw.githubusercontent.com/platanus/activeadmin_addons/master/docs/images/select2-default.gif)

If you want to add a function other than the list of table elements, I recommend you to make a simple design administration screen using Twitter Bootstrap etc.


### This version of the gem
* activeadmin (1.2.0)
* activeadmin_addons (1.1.1)

## Modification of Gemfile

```
activeadmin # Stay tuned
activeadmin_addons # add
# activeadmin-select2 # delete
```

### Automatic generation of configuration files
```
bin/rails g activeadmin_addons:install
```

config/initializers/activeadmin_addons.rb will be generated

## select2 configuration


## Note that the default <input type='select'> will be select2.

For example, if the date is set to select2, it will take time to adjust the width.
This is quite a hassle if you want to use an asset written in an existing ActiveAdmin.

![](https://i.gyazo.com/ff963f623b660a9cc0e3a572bda878fc.gif)
![](https://gyazo.com/ff963f623b660a9cc0e3a572bda878fc)


![](https://i.gyazo.com/4b2aa2ad37c577de08390e68b6b99b33.gif)
![](https://gyazo.com/4b2aa2ad37c577de08390e68b6b99b33)


There are two ways to get around it, and the latter one requires less modification when migrating from activeadmin-select2.


### Workaround 1: Set default-select in the class for <input type='select'> without using select2.

I'll put it this way.

```
f.input :created_at, input_html: { class: "default-select" }
```


### 【Recommended】Workaround 2: Set default-select in the class for <input type='select'> without using select2.

In the configuration file of activeadmin_addons, the default method of select is select2, so you can make it default.
The select tag becomes a normal select tag.


```config/initializers/activeadmin_addons.rb
ActiveadminAddons.setup do |config|
  config.default_select = "default"
end
```

For <input type='select'> that you want to express explicitly with select2, set select2 in the class.
This modification method is easy to migrate because it replaces only the part of activeadmin-select2 that was set to select2 explicitly.

```
# When filling in a form in the old activeadmin-select2 version of select2
f.input :created_at, as: :select2

# activeadmin_addons version
f.input :created_at, input_html: { class: "select2" }
```

Reference: https://github.com/platanus/activeadmin_addons/blob/master/docs/select2_default.md