Autocomplete for Canadian addresses

Suggest real Canadian postal addresses as your users type. One small JavaScript class, no dependencies.

Try it

Start typing a Canadian address, then pick a suggestion to open it on geocoder.ca.

Overview

A JavaScript class for the Geocoder.ca autocomplete API. It is designed for use with geocoder.ca only and has no dependencies.

Installation

Include the script with a <script> tag:

<script src="autocomplete.min.js"></script>

Usage

Add an input field:

<input id="test" name="test" class="form-control"/>

Then attach the autocomplete to it:

var autocomplete = new autocomplete({
  input: document.getElementById("test"),
  key: 'your auth code',
  itemtemplate: '<a href="https://geocoder.ca/?locate={{geocodeaddr}}" class="list-group-item list-group-item-action flex-column align-items-start"> \
    <img width="24px" src="img/geocodelogo.svg"/> {{geocodeaddr}} <span class="float-right badge badge-warning"> &gt; </span> </a>'
});

Options

Option	Required	Description
`input`	Required	The input element to attach the autocomplete to.
`key`	Required	Your API key from geocoder.ca/api.
`itemtemplate`	Optional	HTML template for each suggestion. `{{geocodeaddr}}` is replaced with the address.

Download

Get the full source, including the minified build and demo assets.

Download source code (.tar.gz)