Custom Postcode Input

You may not want the plugin to create its own postcode input field. Instead, you may wish to use an existing field.

The plugin allows you to define a pre-existing element to accept inputs for your postcode lookup.

To enable this behaviour identify your custom input via the input property.

Live Demo

Loading...

<form>
  <label>Search your Address</label>
  <textarea
    id="customInput"
    type="text"
  >
  This is my custom input element. It can be an input, select or textarea element.
  </textarea>
  <div id="lookup_field"></div>
  <div id="address_form">
      <label>Organisation</label>
      <input id="organisation" type="text" />
      <label>Address Line One</label>
      <input id="first_line" type="text" />
      <label>Address Line Two</label>
      <input id="second_line" type="text" />
      <label>Address Line Three</label>
      <input id="third_line" type="text" />
      <label>Post Town</label>
      <input id="post_town" type="text" />
      <label>Postcode</label>
      <input id="postcode" type="text" />
  </div>
</form>

import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup";

PostcodeLookup.setup({
  context: "#lookup_field",
  apiKey: "ak_test",
  input: "#customInput",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode",
  },
});