Merge Address into One Field

Instead of writing address attributes to specific input fields, you can also write out the entire address to a general input like a textarea.

This is achieved by using the OnAddressSelected callback.

Postcode Lookup provides a number of callbacks] to enable custom behaviours.

JavaScript

 
PostcodeLookup.setup({
apiKey: "ak_test",
context: "#lookup_field",
onAddressSelected: function (address) {
  const result = [
    address.line_1,
    address.line_2,
    address.line_3,
    address.post_town,
    address.postcode
  ]
    .filter((elem) => elem !== "")
    .join("");
  document.getElementById("output_field").textContent = result;
}
});

HTML

<form>
  <div class="box">
      <h1>Address Form</h1>
      <label>Search your Address</label>
      <div id="lookup_field"></div>
      <label>Address</label>
      <textarea id="output_field"></textarea>
  </div>
</form>

Live Demo

Loading...