Examples for the `super_select` Field Partial

The super_select partial provides a wonderful default UI (in contrast to the vanilla browser experience for this, which is horrible) with optional search and multi-select functionality out-of-the-box. It invokes the Select2 library to provide you these features.

Define Available Buttons via Localization Yaml

If you invoke the field partial in app/views/account/some_class_name/_form.html.erb like so:

<%= render 'shared/fields/super_select', form: form, method: :response_behavior %>

You can define the available options in config/locales/en/some_class_name.en.yml like so:

en:
  some_class_name:
    fields:
      response_behavior:
        name: &response_behavior Response Behavior
        label: When should this object respond to new submissions?
        heading: Responds
        choices:
          immediate: Immediately
          after_10_minutes: After a 10 minute delay
          disabled: Doesn't respond

Specify Available Choices Inline

Although it's recommended to define any static list of choices in the localization Yaml file (so your application remains easy to translate into other languages), you can also specify these choices using the choices option from the underlying select form field helper:

<%= render 'shared/fields/super_select', form: form, method: :response_behavior,
  choices: [['Immediately', 'immediate'], ['After a 10 minute delay', 'after_10_minutes'] ["Doesn't respond", 'disabled']] %>

Generate Choices Programmatically

You can generate the available buttons using a collection of database objects by passing the options option like so:

<%= render 'shared/fields/super_select', form: form, method: :category_id,
  choices: Category.all.map { |category| [category.label_string, category.id] } %>

Allowing Multiple Option Selections

Here is an example allowing multiple team members to be assigned to a (hypothetical) Project model:

<%= render 'shared/fields/super_select', form: form, method: :membership_ids,
  choices: @project.valid_memberships.map { |membership| [membership.name, membership.id] },
  html_options: {multiple: true} %>

The html_options key is just inherited from the underlying Rails select form field helper.

Allowing Search

Here is the same example, with search enabled: