Add Custom Elements

You may have a specific postcode lookup user interface in mind and don't wish to rely on just specifying a context to generate Postcode Lookup elements and CSS to style those elements.

In these instances, you can create your UI with HTML and tell Postcode Lookup to use your elements to drive the address search process.

For example, you can create a postcode lookup interface with Bootstrap and tell Postcode Lookup which elements should form the postcode input field and search button with input and button elements respectively.

This will also prevent the context from generating its own input and button elements, leaving the context with just the address select element and alerts. So in this example, the context will also serve as its own Bootstrap form-group.

The result is a Postcode Lookup which is more closely tailored to your specific framework and user interface goals.

JavaScript

 
  PostcodeLookup.setup({
    apiKey: "ak_test",
    context: "#lookup_field",
    button: "#button",
    input: "#input",
    selectClass: "form-control",
    outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode",
    },
  });

HTML

<form>
    <label for="input">Search your Postcode</label>
    <input type="text" id="input" />
    <div id="lookup_field"></div>
    <button id="button" class="btn btn-dark mt-3">
        Lookup Address
    </button>
    <label for="first_line">Address Line One</label>
    <input type="text" id="first_line" />
    <label for="second_line">Address Line Two</label>
    <input type="text" id="second_line" />
    <label for="third_line">Address Line Three</label>
    <input type="text" id="third_line" />
    <label for="post_town">Post Town</label>
    <input type="text" id="post_town" />
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" />
</form>

Live Demo

Loading...