Filter By Postcode Outward

Display address results that matches the chosen postcode outward value. It will only display matched addresses.

The queryOptions object allows customizing the search query. In this example, the postcode_outward property is set to "NW1" to filter the search results towards the NW1 postcode outward code.

JavaScript

AddressFinder.setup({
  apiKey: "ak_test",
  queryOptions: {
      postcode_outward: "NW1"
  },
  outputFields: {
      line_1: "#first_line",
      line_2: "#second_line",
      line_3: "#third_line",
      post_town: "#post_town",
      postcode: "#postcode",
  }
});

HTML

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

Dynamically update postcode outward

JavaScript

const c = AddressFinder.setup({
  apiKey: "ak_test",
  queryOptions: {
      bias_postcode_outward: "sw1a"
  },
  outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode"
  }
  });
  const filter = document.getElementById("filter_postcode");
  bias.addEventListener("change", (e) => {
  c.setQueryOptions({
      postcode_outward: e.target.value
  });
});

HTML

<form style="max-width: 450px; padding: 10px;">
  <h1>Address Form</h1>
  <label>Suggest Addresses with Postcode:</label>
  <input type="text" id="filter_postcode" />
  <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 (Dynamic Postcode Outward)

Loading...