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