Addressfinder

The best way to find exact addresses in New Zealand

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top
  • Pricing
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Bounding Box
      Collect all addresses within a defined area
    • MORE FEATURES
  • About us
  • Case studies
  • FAQ
  • Contact
  • Blog
  • JavaScript widget docs
  • API developer docs
  • Pricing
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Bounding Box
      Collect all addresses within a defined area
    • MORE 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
      • API Errors
      See all API docs
  • Login

Widget advanced usage

In this page

  • 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',
            'NZ'
          );

          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 jsFiddle

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 it’s own stylesheet:

    
    (function(){
      var widget,
        initAF = function() {
          widget = new AddressFinder.Widget(
            document.getElementById('address_field'),
            'YOUR_KEY',
            'NZ',
            {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 jsFiddle

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, Auckland', 'Cuba Street, Wellington', 'Bridge Street, Nelson', 'The Octagon, Dunedin'],
        initAF = function() {
          widget = new AddressFinder.Widget(
            document.getElementById('address_field'),
            'YOUR_KEY',
            'NZ'
          );

          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 "<div class="store_result">" + value + "</div>"
          });
        };

      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 jsFiddle

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
    • Can't find your address?
    • JavaScript widget reference
  • Email Verification Services (ALPHA)
    • Email Verification API
    • Widget integration guide
    • Widget advanced usage
  • API Specs (NZ)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Address Reverse Geocode
    • Address Bounding Box
    • Location Autocomplete
    • Location Metadata
    • Points of Interest Autocomplete
    • Points of Interest Metadata
    • API Errors
  • API Specs (AU)
  • API Specs (INT'L)
  • Integrations
    • Magento
    • WooCommerce
    • BigCommerce
    • Salesforce
    • Shopify Plus
    • Hubspot
    • Spiffy Stores
    • Ruby
    • iOS
    • Drupal
    • Microsoft Dynamics 365
    • Vue
    • Gravity Forms
    • React
Addressfinder logo
Addressfinder provides speedy, accurate and dependable address autocompletion at a fair price. Easily integrate our address finder software with your site to start enjoying our address verification, address autocomplete and other address services today.

Sitemap

  • Home
  • About
  • Contact
  • Blog
  • FAQ
  • Pricing
  • Case Studies
  • Status Page
  • Privacy Policy
  • Terms & Conditions
  • Features
  • Address Metadata
  • Bulk Cleansing
  • Geocode Addresses
  • Reverse Address Lookup
  • Points of Interest
  • Street, Suburb & City Search
  • Bounding Box Search
  • Postcode Finder
  • Address Verification
  • Integrations
  • WooCommerce
  • BigCommerce
  • Shopify Plus
  • Magento
  • Salesforce
  • Spiffy Stores
  • iOS
  • Ruby
  • HubSpot
  • Drupal
  • Microsoft Dynamics 365
  • Vue
  • Gravity Forms
  • React
  • API Documentation
  • Address Autocomplete
  • Address Metadata
  • Address Verification
  • API Errors
  • Another 6 APIs
  • AU APIs specs
  • International APIs
  • Widget Documentation
  • Integration Guide
  • International Integration Guide
  • Code Generator
  • Code Examples
  • Javascript Reference
Addressfinder is also available in Australia
Terms and Conditions | Privacy
Copyright © 2022 Addressfinder, New Zealand