ActiveAdmin Semantic UI Autocomplete component a.k.a. JSX in Ruby with Arbre

autocomplete_input.rb

# app/admin/components/autocomplete_input.rb
module Components
  class AutocompleteInput < Arbre::Component
    builder_method :autocomplete_input
    
    def tag_name
      'li'
    end
    
    def default_class_name
      'string input optional stringish'
    end
    
    def build(title, data)
      attribute     = data[:attribute]
      @form_builder = data[:form_builder]
      collection    = data[:collection]
      label title, for: "#{object_name}_#{attribute}"
      div class: 'ui selection dropdown search multiple' do
        build_input attribute
        build_menu collection
      end
    end
    
    def build_input(attribute)
      csv = object.send(attribute).join ','
      @form_builder.hidden_field attribute, value: csv
      i class: 'dropdown icon'
      div class: 'default text' do
        "Select #{object_name} #{attribute}"
      end
    end
    
    private
    
    def build_menu(collection)
      div class: 'menu' do
        collection.map do |item|
          div class: 'item', 'data-value' => item.id do
            item.name
          end
        end
      end
    end
    
    def object
      @form_builder.object
    end
    
    def object_name
      @form_builder.object.class.name.downcase
    end
  end
end

# app/admin/property.rb - example use in form

autocomplete_input 'Tags',
  attribute: :tag_ids,
  form_builder: f,
  collection: Tag.select(:id, :name)
  
# Gemfile
gem 'semantic-ui-sass', git: 'https://github.com/doabit/semantic-ui-sass.git'

# app/assets/javascripts/active_admin.js.coffee
#= require semantic-ui/dropdown
#= require semantic-ui/transition

$('.ui.dropdown').dropdown()

# app/assets/stylesheets/active_admin.scss
@import "semantic-ui/icon";
@import "semantic-ui/dropdown";
@import "semantic-ui/transition";