adicionar uma imagem loader.gif na pasta assets

01_find_cep_gemfile.rb

gem 'brcep'

02_routes.rb

get '/clientes/cep/:cep' => 'customers#search_ceps'

03_jquery.lol.search_cep.js

(function($)
{
  $.fn.LOLSearchCep = function(params)
  {
    params = $.extend( { 
                        logradouro:      'input.logradouro'     , 
                        bairro:          'input.bairro'         ,
                        cidade:          'input.cidade'         ,
                        uf:              'select.uf'            ,
                        cep:             'input.cep'            ,
                        focus_field:     'input.number'         ,
                        url:             '/clientes/cep/'
                       }, params);

    this.each(function() {
      new Plugin(this, params);
    });

    return this;
  };
})(jQuery);

function Plugin(element, options) {
    var that        = this;
    this.el         = element;
    this.$el        = $(element);
    this.$loader    = undefined;
    this.$container = this.$el.parent().parent().parent();
    this.options    = options;

    // Initialize the plugin instance
    this.init();
}

//
// Plugin prototype
//
Plugin.prototype = {

    init: function() {
        var self = this;

        this._addLoader();

        this.$el.focusout(function(event) {
          if(self.$el.val() === ''){ return false;}

          self._getCepFromServer();
        });
    },

    destroy: function() {
    },

    _addLoader: function() {
      this.$loader = $( "<img></img>", {
                          "src":   "/assets/loader.gif",
                          "class": "none loader"
                      }) ;

      this.$el.after( this.$loader );
    },

    _getCepFromServer: function(){
      var self = this;

      $.ajax({
        url: this.options.url + this.$el.val(),
        type: 'GET',
        dataType: 'json',
        beforeSend: function( jqXHR, settings ){
          self.$loader.toggleClass('none');
        },
        complete: function(xhr, textStatus) {
          self.$loader.toggleClass('none');
        },
        success: function(data, textStatus, xhr) {
          self._fillInputs(data);
        },
        error: function(xhr, textStatus, errorThrown) {
          var error_message = $.parseJSON(xhr.responseText);

          self._cleanInputs();
        }
      });
    },

    _fillInputs: function(json){
      this.$container.find(this.options.logradouro).val(json.tipo_logradouro + ' ' + json.logradouro);
      this.$container.find(this.options.bairro).val(json.bairro);
      this.$container.find(this.options.cidade).val(json.cidade);
      this.$container.find(this.options.uf).val(json.uf);
      this.$container.find(this.options.focus_field).focus();
      // this.$container.find(this.options.cep).val(json.cep);
    },

    _cleanInputs: function(json){
      this.$container.find(this.options.logradouro).val('');
      this.$container.find(this.options.bairro).val('');
      this.$container.find(this.options.cidade).val('');
      this.$container.find(this.options.uf).val('');
      // this.$container.find(this.options.cep).val(json.cep);
    }

}

04_controller_find_cep.rb

  def search_ceps
    cep_params = BuscaEndereco.cep(params[:cep])

    render json: cep_params

    rescue Exception => e
      render json: {message: e.message}, status: :error
  end

05_controller_find_cep_spec.rb

  describe "SEARCH cep" do
    context 'when valid cep' do
      let(:valid_response){ "{\"tipo_logradouro\":\"Rua\",\"logradouro\":\"Vicente de Carvalho\",\"bairro\":\"Cambuci\",\"cidade\":\"S\\u00e3o Paulo\",\"uf\":\"SP\",\"cep\":\"01521020\"}" }

      before { get :search_ceps, cep: '01521-020' }

      it { response.status.should == 200 }
      it { response.body.should == valid_response}
    end

    context "when invalid cep" do
      let(:error_response){ "{\"message\":\"O CEP informado possui um formato inv\\u00e1lido.\"}" }

      before { get :search_ceps, cep: '01521-0200000' }

      it { response.status.should == 500 }
      it { response.body.should == error_response }
    end
  end

06_find_cep_form.html.erb

<p>
  <%= ff.label :cep %>
	<%= ff.text_field :cep, class: :cep, placeholder: 'Ex: 01521-098' %>
</p>

07_application.js

var cepField = $('input.cep');

if(cepField[0]){
 cepField.LOLSearchCep();
}