Split Address Lines

If an address line is returned with more than one address element. It can be separated and displayed on a separate line.

The removeOrganisation property is set to true to remove the organization name from the address if present. The onAddressPopulated property defines a function that will be executed after the address is populated in the form fields. It re-orders the address lines by splitting each line on commas, trimming the values, and joining them again. The outputFields object defines the mapping between the address elements returned by the API and the form fields where the data will be displayed. It includes the following properties: line_1, line_2, line_3, post_town, and postcode map to their respective input fields with the corresponding IDs.

JavaScript

const split = function (input) {
  return (input.value || "").split(",").map(function (s) {
      return s.trim();
  });
};
AddressFinder.setup({
  apiKey: "ak_test",
  removeOrganisation: true,
  onAddressPopulated: function () {
      const line_1 = document.querySelector("#line_1");
      const line_2 = document.querySelector("#line_2");
      const line_3 = document.querySelector("#line_3");
      const lines = []
      .concat(split(line_1))
      .concat(split(line_2))
      .concat(split(line_3));
      line_1.value = lines.shift() || "";
      line_2.value = lines.shift() || "";
      line_3.value = lines.join(", ");
  },
  outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode"
  }
});

HTML

<form style="max-width: 450px; padding: 10px;">
  <h1>Address Form</h1>
  <label for="line_1">Address First Line</label>
  <input type="text" id="line_1" />
  <label for="line_2">Address Second Line</label>
  <input type="text" id="line_2" />
  <label for="line_3">Address Third Line</label>
  <input type="text" id="line_3" />
  <label for="post_town">Town or City</label>
  <input type="text" id="post_town" />
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" />
</form>

Live Demo

Loading...