AddressFinder

The best way to find exact addresses in Australia

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top

Menu

Get Started Free

  • Pricing
  • Features & plugins
  • About us
  • Case studies
  • FAQ
  • Contact
  • Blog
  • JavaScript widget docs
  • API developer docs
  • Log in
  • Pricing
  • Features
  • More
    • Company & product
      • About Us
      • Case Studies
      • FAQ
      • Partners
      • Blog
      Contact Us
    • Integrations
      • Magento
      • WooCommerce
      • BigCommerce
      • Salesforce
      • Shopify Plus
      See all integrations
    • JavaScript widget docs
      • Integration Guide
      • Widget Code Generator
      • Widget Reference
      • Code Examples
      See all JavaScript docs
    • API developer docs
      • Address Autocomplete
      • Address Metadata
      • Address Verification
      See all API docs
  • Log in
  • Get Started Free

Widget advanced usage

  • Event Listeners
  • Custom Styling
  • Adding third-party search services.
  • Support for Asynchronous Module Definition (AMD)

Event Listeners

You can subscribe to event notifications from the widget using the on() listener function. This method simply takes the event name, and a callback function.

    
      (function(){
        var widget,
          initAF = function() {
            widget = new AddressFinder.Widget(
              document.getElementById('address_field'),
              'YOUR_KEY',
              'AU'
            );
            widget.on('result:select', function(value, item) {
              alert('You’ve selected: ' + value);
            });
          };

        function downloadAF(f){
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = f;
    document.body.appendChild(script);
  };

        document.addEventListener('DOMContentLoaded', function(){
    downloadAF(initAF);
  });

      })();
    
  

View this on CodePen

Take a look at our Widget Documentation to see what kind of events you can set listeners for.

Custom Styling

Typically our JavaScript library embeds a stylesheet with some simple styling. However if you wish to apply your own CSS, that can be done with a few simple tweaks.

First, when initialising the widget, you’ll need to pass an option specifying not to embed its own stylesheet:

  
    (function(){
      var widget,
        initAF = function() {
          widget = new AddressFinder.Widget(
            document.getElementById('address_field'),
            'YOUR_KEY',
            'AU',
            {manual_style:true}
          );
        };

      function downloadAF(f){
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = f;
    document.body.appendChild(script);
  };

      document.addEventListener('DOMContentLoaded', function(){
    downloadAF(initAF);
  });

    })();
  

Then include some CSS in a stylesheet like so:

  
  ul.af_list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid 1px #666;
    background: white;
  }
  li.af_item {
    cursor: pointer;
  }
  li.af_hover {
    background-color: steelblue;
    color: white;
  }
  li.af_footer {
    font-size: 0.8em;
    color: #666;
    text-align: right;
  }
  

View this on CodePen

Adding third-party search services

It’s possible to include additional search results in the autocomplete results, by providing a function to carry out the searching. The search function will be passed two arguments, the query and a callback function. The callback function requires you to pass back the original query and an array of formatted results.

    
    (function(){
      var widget,
        store_service,
        stores = ['Queen Street, Brisbane','Cuba Road, Tasmania', 'Oxford Street, Sydney', 'Eureka Tower, Melbourne'],
        initAF = function() {
          widget = new AddressFinder.Widget(
            document.getElementById('address_field'),
            'YOUR_KEY',
            'AU'
          );

          store_service = widget.addService('store-search',function(query, response_fn){
            var regex = new RegExp(query, 'gi');
            var matches = stores.filter(function(store){
              return regex.test(store);
            });
            var results = matches.map(function(match){
              return { value: match }
            });
            response_fn(query, results);
          });

          store_service.setOption('renderer', function(value){
            return '
' + value + '
'; }); }; function downloadAF(f){ var script = document.createElement('script'); script.src = 'https://api.addressfinder.io/assets/v3/widget.js'; script.async = true; script.onload = f; document.body.appendChild(script); }; document.addEventListener('DOMContentLoaded', function(){ downloadAF(initAF); }); })();

View this on CodePen

Support for Asynchronous Module Definition (AMD)

By default the widget.js package includes dependencies which can cause problems with AMD libraries such as Require.js, especially when the AddressFinder is loaded after the AMD library. As the core library needs to be loaded from our remote server, we’re providing a special core.js library, which allows you to include the dependencies (reqwest and neat-complete) in your own project.

The best point reference is our example project on github.

The core.js is compatible with all modern browsers. Internet Explorer is supported for versions 10+

  • JavaScript Widget
    • Integration guide
    • Widget code generator
    • Code examples
    • Best practices
    • Fixing browser quirks
    • Advanced usage
    • JavaScript widget reference
  • API Specs (AU)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Location Autocomplete
    • Location Metadata
    • API Errors
  • API Specs (NZ)
  • Integrations
    • Magento
    • WooCommerce
    • BigCommerce
    • Salesforce
    • Shopify Plus
    • Spiffy Stores
    • Ruby
    • iOS
    • Drupal
    • Microsoft Dynamics 365
    • Vue
    • Gravity Forms

Sitemap

Home

  • About
  • Contact
  • Blog
  • FAQ
  • Pricing
  • Case Studies
  • Status Page
  • Privacy Policy
  • Terms & Conditions

Features

  • Australian Address Autocomplete
  • Australian Address Verification
  • Australian Address Metadata
  • Geocode Australian Addresses
  • Street, Suburb & City Search
  • Customer Portal

Integrations

  • WooCommerce
  • BigCommerce
  • Shopify Plus
  • Magento
  • Salesforce
  • Spiffy Stores
  • iOS
  • Ruby
  • Drupal
  • Microsoft Dynamics 365
  • Vue
  • Gravity Forms

API Documentation

  • Address Autocomplete
  • Address Metadata
  • Address Verification
  • API Errors
  • Another 2 APIs
  • NZ API specs

Widget Documentation

  • Integration Guide
  • Code Generator
  • Code Examples
  • Javascript Reference

Get Started Free

AddressFinder is also available in New Zealand