Skip to main content

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.

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",

Live Demo