There are many ways you could make a REST call to our services and there are tons of libraries in many languages that facilitate this.

On the home page of Addressian, there is a demo section that implements “search-as-you-type”. Here is how that is implemented:

Search-as-you-type

We use a Javascript library called easy-autocomplete.

Add the dependencies to your HTML page’s header section:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css">

Then create a section in your HTML form with an “input” element inside it:

<section class="easy-autocomplete">
 <div>
  <input id="tags" type="text" autocomplete="off" placeholder="Search...">
 </div>
 </section>

Then add this bit of Javascript, anywhere in your HTML source code:

<script>
  $(function() {
   var selectItem = function(event, ui) {
    $("#tags").val(ui.item.value);
    return false;
   }
   var options = {
    url: function(phrase) {
     return "https://api-full.addressian.co.uk/address/" + phrase;
    },
    ajaxSettings: {
     headers: {
      'x-api-key': '[your_api_key]'
     }
    },
    getValue: function(element) {
     return element.address.join(", ") + ", " + element.citytown + ", " + element.postcode;
    },
    theme: "blue-light",
    placeholder: "Type an address in here..",
    list: {
     maxNumberOfElements: 20,
     onClickEvent: function() {
      alert("The postcode of the item you clicked on was " + $("#tags").getSelectedItemData().postcode);
     }
    }

   };
   $("#tags").easyAutocomplete(options);
  });
 </script>

Retrieve addresses from a postcode

Add the dependency to your HTML page’s header section:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Then create a section in your HTML form with an “input” element inside it:

<section class="easy-autocomplete">
  <input id="postcode" type="text" autocomplete="off" placeholder="search...">
  <button id="postcode-go">Go</button>
  <select id="postcode-dropdown" hidden=""></select>
 </section>

Then add this bit of Javascript, anywhere in your HTML source code:

<script>
  jQuery("#postcode-go").click(function() {

   if (jQuery("#postcode").val() == '') {
    return;
   }
   let dropdown = jQuery('#postcode-dropdown');
   dropdown.empty();
   dropdown.show()
   dropdown.append('<option selected="true" disabled>Choose your address</option>');
   dropdown.prop('selectedIndex', 0);
   dropdown.change(function() {

    var selectedAddress = JSON.parse($(this).children("option:selected").val());
    alert("The selected address is: " + selectedAddress.address + " And city is: " + selectedAddress.citytown);
   });
   const url = '';
   jQuery.ajax({
    beforeSend: function(request) {
     request.setRequestHeader("x-api-key", '[your_api_key]');
    },
    dataType: "json",
    url: "https://api-full.addressian.co.uk/address/" + jQuery("#postcode").val(),
    success: function(data) {
     jQuery.each(data, function(key, entry) {
      dropdown.append(jQuery('<option></option>').attr('value', JSON.stringify(entry)).text(entry.address.join(', ')));
     })
    }
   });
   jQuery.getJSON("", function(data) {});
  });
 </script>

Leave a Reply

Basket

Back to Top