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 tweeks.

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 '
' + 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);
  });

  })();