ActiveAdminAutoSelect

This gem is a nifty UI widget, which combines the Select2 library, PostgeSQL and ActiveAdmin, for helping you filter records in ActiveAdmin using auto-completion, based on certain database columns of your choice.

Installation

Add this line to your application's Gemfile:

gem 'active_admin_auto_select'

Currently, Select2 3.5 is required. Select2 versions 4+ are not compatible as the API contains breaking changes. We are looking to remedy this as soon as possible.

And then execute:

> bundle

Add the following directives to your Javascript manifest file:

//= require select2
//= require underscore
//= require autoselect

Or for Coffeescript flavor, add this:

#= require select2
#= require underscore
#= require autoselect

Add the following directive to your Stylesheet manifest file:

@import "select2";

Usage

After installing the gem, you have to add some lines into the ActiveAdmin controller you want to auto_select. For example, say you want to add the widget in order to filter to the users' id filter, by searching in their full names or emails:

Call the auto_select method in order to create the collection_action

auto_select :first_name, :last_name, :email,
  {
    'users_with_properties' => ->{ User.joins(:properties).uniq }
  }

In the example above, first_name, :last_name and :email are the database columns that help you find the desired user. Anything that is typed into the autocomplete field will be lookup in the columns specified here. Last argument is a Hash of scopes that will make sense by reading through the next example.

Define the relevant filter in your controller

filter :id_eq, label: 'User',
  input_html: {
    data: {
      scope: 'users_with_properties',
      url: 'users/autoselect',
      placeholder: 'Select a user'
    }
  }

Notice

• :id_eq (required) is the column being filtered id + the _eq suffix (Ransack style).
• data-scope option is the desired scope that will be used by the widget in order to fetch the similar users.
• data-url (required) is the url generated by the action, which is defined in the ActiveAdmin controller.

Instantiate the AutoSelect Javascript class in your active_admin's javascript file.

$(document).ready ->
  newAutoSelect = new AutoSelect(input: $('#q_id_eq'))
  newAutoSelect.init()

Where #q_user_id_eq use the generated input's id of the filter you added. For instance, if your filter's name in the ActiveAdmin controller is defined as id_eq, then the id attribute of the generated input will be q_id_eq.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/spyrbri/admin_auto_select. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.