AutocompleteZipcode

This gem was built to "automagically" fills an address form, for Rails version >= 3.1.

Status

Try it

Installation

Add the following gems to your application's Gemfile:

gem 'autocomplete_zipcode'

And then execute:

bundle install

Simple Usage

In app/assets/javascripts/application.js, you should add as follows:

// app/assets/javascripts/application.js
//= require ...
//= require turbolinks
//= require jquery
//= require autocomplete_zipcode

$(document).on('ready', () => {
  AutocompleteZipcode.mount();
});

Basic Example

<%= simple_form_for :example do |f| %>
  ...
  <%= f.input :zipcode, as: :zipcode %>
  <%= f.input :street, as: :street %>
  <%= f.input :neighborhood, as: :neighborhood %>
  <%= f.input :city, as: :city %>
  <%= f.input :state, as: :state %>
  ...
<% end %>

If you are not using simple_form, then simply add the data-provider="zipcode" and the other fields name to the input field yourself.

<%= form_for :example do |f| %>
  ...
  <%= f.text_field :zipcode, data: { autocomplete_zipcode_provider: :zipcode } %>
  <%= f.text_field :street, data: { autocomplete_zipcode_provider: :street }  %>
  ...
<% end %>

Handle invalid zipcodes

Simply add an event listener callback to zipcode.error, for example:

// app/assets/javascripts/application.js

document.addEventListener('zipcode.error', () => {
  alert('Invalid zipcode!!!')
});

Advanced Usage

// app/assets/javascripts/application.js
//= require ...
//= require turbolinks
//= require jquery
//= require autocomplete_zipcode

$(document).on('ready', () => {
  AutocompleteZipcode.mount({
    onSuccess: (containerEl, zipcodeEl) => {
      console.log(containerEl, zipcodeEl);
    },
    onFail: (containerEl, zipcodeEl) => {
      console.log(containerEl, zipcodeEl);
    },
  });

  document.addEventListener('zipcode.success', () => {
    console.log('zipcode fetched successfully');
  });

  document.addEventListener('zipcode.error', () => {
    console.log('zipcode fetch failed');
  });
});

Sample projects

For an online example, take a look at this repository. You can also see it working on the dummy application (spec/dummy)

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request