PROJECT UNMAINTAINED

This project is not maintained anymore

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

---

ActiveAdmin Selectize

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:

classArticle < ApplicationRecordhas_and_belongs_to_many:tagsaccepts_nested_attributes_for:tagsend

# ActiveAdmin article form conf:formdo |f|
f.inputs'Article'dof.input:titlef.input:descriptionf.input:publishedf.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...'}endf.actionsend

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:

indexdownload_links: [:csv,:json]do# ...end

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

defas_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

• Mattia Roccoberton: author

License

MIT