Repository is archived
No release in over 3 years
Low commit activity in last 3 years
An Active Admin plugin to use Selectize.js (jQuery required)
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

 Project Readme

PROJECT UNMAINTAINED

This project is not maintained anymore

If you like it or continue to use it fork it please.


ActiveAdmin Selectize

gem version gem downloads linters specs

An Active Admin plugin to use Selectize.js (jQuery required).

Features:

  • nice select inputs;
  • items search;
  • AJAX content loading;
  • improve many-to-many / one-to-many selection.

Install

  • Add to your Gemfile: gem 'activeadmin_selectize'
  • Execute bundle
  • Add at the end of your ActiveAdmin styles (app/assets/stylesheets/active_admin.scss): @import 'activeadmin/selectize_input';
  • Add at the end of your ActiveAdmin javascripts (app/assets/javascripts/active_admin.js):
//= require activeadmin/selectize/selectize
//= require activeadmin/selectize_input
  • Use the input with as: :selectize in Active Admin model conf

Why 2 separated scripts? In this way you can include a different version of Selectize.js if you like.

Examples

Example 1: an Article model with a many-to-many relation with Tag model:

class Article < ApplicationRecord
  has_and_belongs_to_many :tags
  accepts_nested_attributes_for :tags
end
# ActiveAdmin article form conf:
  form do |f|
    f.inputs 'Article' do
      f.input :title
      f.input :description
      f.input :published
      f.input :tags, as: :selectize, collection: f.object.tags, input_html: { 'data-opt-remote': admin_tags_path( format: :json ), 'data-opt-text': 'name', 'data-opt-value': 'id', 'data-opt-highlight': 'true', placeholder: 'Search a tag...' }
    end
    f.actions
  end

Example 2: using selectize in filters:

# Without remote items (no AJAX):
filter :name_eq, as: :selectize, collection: Author.all.pluck( :name, :name )
# With remote items:
filter :tags_id_eq, as: :selectize, collection: [], input_html: { 'data-opt-remote': '/admin/tags.json', 'data-opt-text': 'name', 'data-opt-value': 'id', 'data-opts': '{"dropdownParent":"body"}', placeholder: 'Search a tag...' }

Notes

  • In ActiveAdmin json routes should be enabled by default, this behavior is controlled by download_links option for index action. Example:
index download_links: [:csv, :json] do
  # ...
end

You can customize the JSON response overriding the as_json method of the model:

def as_json( options = nil )
  super({ only: [:id], methods: [:fullname] }.merge(options || {}))
end
  • If the select items "gets cut" by the container try adding: 'data-opts': '{"dropdownParent":"body"}'

  • Alternative syntax to pass data attributes: input_html: { data: { opts: '{}' } }

  • To use this plugins with ActiveAdmin 1.x please use the version 0.1.6

Options

Pass the required options using input_html.

  • data-opt-remote: URL used for AJAX search requests (method GET)
  • data-opt-text: field to use as option label
  • data-opt-value: field to use as select value
  • data-opt-NAME: option NAME passed directly to Selectize.js - see options

Alternative syntax:

  • data-opts: overrides Selectize options - example: 'data-opts': '{"highlight":true,"plugins":[]}'

Do you like it? Star it!

If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other Active Admin components.

Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.

Contributors

License

MIT