/ activeadmin

Adding custom search bar to ActiveAdmin

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'));
    
  2. 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'));
    
  3. 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
                  })
    
  4. 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
    
  5. Add a route for searchable_tags

                 namespace ActiveAdmin.application.default_namespace do
                   get 'searchable_tags'
                 end
    
  6. 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;
                 }
               });
    
  7. 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.