Active Admin is a great plugin that helps us to get administration functions with elegant and simple interface up and live quickly without much of a hassle or efforts. One can also make use of various customisations as per their need with very little effort.

In this article, I will be explaining how we can add custom search bar in Active Admin. Adding custom search bar is not as easy and straight forward as other Active Admin customisations. I will be making use of jQuery to do this.

Here, I will be taking an example of searching resources with tags on resource's active admin index page.

  1. First, we would add search textfield via jQuery to index page of ActiveAdmin resource.
 var search_bar;
 search_bar = "<input type ='text' id ='search_tag'/>";
 $(search_bar).insertAfter($('table.index.index_table'));
  1. Now we need a button to submit the search value entered by the user. We will update the above code to include submit button.
var search_bar;
 search_bar = "<input type ='text' id ='search_tag'/><br/> <button type ='button' class ='search_with_tags'>Search tags</button>";
 $(search_bar).insertAfter($('table.index.index_table'));
  1. To support search using multiple tags, I initialize tokeninput jquery plugin on the textfield #search_tag.
 $('#search_tag').tokenInput('searchable_tags', {
   theme: 'facebook',
   crossDomain: false,
   resultsLimit: 10,
   tokenValue: 'name',
   minChars: 2
 })
  1. Next we need a rails action searchable_tags that would send a list of tags and tokenInput would display them as autocomplete list. We will create a new AdminController with searchable_tags as action below:
# frozen_string_literal: true
class AdminController < ApplicationController
  before_action :authenticate_admin_user!

  def searchable_tags
    records = Tag.where("name ILIKE '%#{params[:q]}%'")
    render json: records.to_json
  end
end
  1. Add a route for searchable_tags
namespace ActiveAdmin.application.default_namespace do
  get 'searchable_tags'
end
  1. Now we will handle on click event of button added in Step #2.
  $('.active_admin.index').on('click', '.search_with_tags', function(e) {
    var $search_values;
    e.preventDefault();
    $search_values = $('#search_tag').val();
    if ($search_values.length > 0) {
      window.location.href = '?search_tags=' + $search_values;
    }
  });
  1. Using window.location.href would reload the same page with new query params search_tags. Since we are reloading index page, we would override index action of active admin resource to filter records based on search_tags.
ActiveAdmin.register ResourceName do
  controller do
    def index
      index! do |format|
        unless params[:search_tags].blank?
          resources = ResourceName.tagged_with(params[:search_tags]).page(params[:page])
        end

        format.html
        format.csv   { export_csv resources }
        format.json  { render json: resources }
        format.xml   { render xml: resources }
      end
    end
  end
end

Thats it! You can use this similar approach to add search bar and search functionality to any page of ActiveAdmin.