Addressfinder

The best way to find exact addresses in New Zealand

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top
  • About
    • About Us
    • Case Studies
    • FAQ
    • Partners
    • Blog
    • Contact Us
  • Pricing
  • Industries
    • E-commerce
      Collect verified delivery addresses
    • Finance
      Verified address data for KYC and AML
    • Utilities
      Make network connections faster
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Email Verification
      Collect only valid email addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Address Metadata
      Get extra data about addresses
    • MORE FEATURES
  • Address Verification
    • Integration Guide
    • Javascript Reference
    • Code Examples
    • API Reference
    • Code Generator
    • International Integration
  • Email Verification
    • Integration Guide
    • Javascript Reference
    • Code Examples
    • API Reference
  • About
    • About Us
    • Case Studies
    • Frequently Asked Questions
    • Partners
    • Blog
    • Contact Us
  • Pricing
  • Industries
    • E-commerce
      Collect verified delivery addresses
    • Finance
      Verified address data for KYC and AML
    • Utilities
      Make network connections faster
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Email Verification
      Collect only valid email addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Address Metadata
      Get extra data about addresses
    • MORE FEATURES
  • Documentation
    • Integrations
      • Magento
      • WooCommerce
      • Hubspot
      • Salesforce
      • Shopify Plus
      See all integrations
    • Address Verification
      • Integration Guide
      • Javascript Reference
      • Code Examples
      • API Reference
      • Code Generator
      • International Integration
    • Email Verification
      • Integration Guide
      • Javascript Reference
      • Code Examples
      • API Reference
  • 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+

  • Address Verification
    • Integration guide
    • Javascript reference
    • Code examples
    • Widget code generator
    • Best practices
    • Fixing browser quirks
    • Advanced usage
    • Can't find your address?
    • Integration guide (Int'l)
  • Email Verification
    • Integration guide
    • Javascript reference
    • Code examples
    • Advanced usage
    • API reference
  • API Documentation (NZ)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Address Reverse Geocode
    • Location Autocomplete
    • Location Metadata
    • Points of Interest Autocomplete
    • Points of Interest Metadata
    • API Errors
  • API Documentation (AU)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Location Autocomplete
    • Location Metadata
    • API Errors
  • API Documentation (INT'L)
    • Address Autocomplete
    • Address Metadata
  • Integrations
    • Magento
    • WooCommerce
    • BigCommerce
    • Salesforce
    • Shopify Plus
    • Hubspot
    • StoreConnect
    • 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

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