active_admin.css.scss

@import "select2";

active_admin.js.coffee

#= require active_admin/base
#= require select2

$(document).ready ->
  $(".tagselect").each ->
    $this = $ this

    placeholder = $this.data 'placeholder'
    url = $this.data 'url'
    saved = $this.data 'saved'

    $this.select2
      tags: true
      width: 'element'
      placeholder: placeholder
      minimumInputLength: 2

      initSelection: (element, callback) ->
        saved and callback(saved)

      ajax:
        url: url
        dataType: 'json'
        data: (term) ->
          q: term

        results: (data) ->
          results: data

      createSearchChoice: (term, data) ->
        f = $(data).filter ->
          @name.localeCompare(term) is 0

        if f.length is 0
          id: term
          name: term

      formatResult: (item) ->
        item.name

      formatSelection: (item) ->
        item.name

active_admin_model.rb

ActiveAdmin.register Photo do
  permit_params :tag_list
  
  form multipart: true do |f|
    f.inputs do
      f.input :tag_list, 
              label: 'Tags',
              input_html: {
                data: {
                  placeholder: 'Enter tags',
                  saved: f.object.tags.map{ |t| { id: t.name, name: t.name } }.to_json,
                  url: auto_complete_tags_path 
                },
                class: 'tagselect'
              }
    end
    f.actions
  end
end

auto_complete.json.jbuilder

json.array!(@tags) do |tag|
  json.extract! tag, :name
  json.id tag.name
end

tags_controller.rb

class TagsController < ApplicationController
  def auto_complete
    query = params[:q]
    @tags = ActsAsTaggableOn::Tag.where("name LIKE ?", "%#{query}%")
                                 .order(:name)
    respond_to do |format|
      format.json
    end
  end
end