Autocomplete Address Form Using jQuery And Google Places API - LightCheckout

LightCheckout is a jQuery plugin that helps auto fill address form inputs (city, address, province, zipcode) using Google's Places Autocomplete API. Helps in faster address entry for shipping addresses and credit card billing addresses.

How to use it:

1. Load the jQuery LightCheckout plugin after jQuery library, before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.lightcheckout.js"></script>

2. Add the city, address, province, zipcode input fields to your address form.

<div class="city">
  <input name="city" id="city" type="text">
</div>
<div class="zipcode">
  <input name="zipcode" id="zipcode" type="text">
</div>
<div class="province">
  <input name="province" id="province" type="text">
</div>

3. Initialize the address form with some options.

var options = {
    address: '#address',
    city: '#city',
    province: '#province',
    zip: '#zipcode'
};
$('.yourForm').lightCheckout(options);

4. Options and defaults.

// input wrapper element
inputWrapper : 'div',

// selector of autocomplete input
autocomplete: null,

// custom selectors
address: '.address',
city: '.city',
province: '.province',
zip: '.zip',

// (ex. Long Name: "California", Short name: "CA"
shortProvince: true,

// error message
noNumberError: 'Please, insert also street number.',

// language
language: 'en',

// override common fill of inputs
setField: function ($input, value) {
  $input.val(value);
}

---

This awesome jQuery plugin is developed by sperti. For more Advanced Usages, please check the demo page or visit the official website.