postcode-lookup-psl

A small library for an easy Postcode address lookup implementation by Paloma staff

Install

NPM

npm i postcode-lookup-psl

CDN

<link rel="stylesheet" href="https://unpkg.com/postcode-lookup-psl/dist/index.min.css">
<script src="https://unpkg.com/postcode-lookup-psl/dist/index.min.js"></script>

Usage

index.html

<input class="txtPostcode" type="text">
<input class="txtAddress1" type="text">
<input class="txtAddress2" type="text">
<input class="txtAddress3" type="text">
<input class="txtTown" type="text">
<input class="txtCounty" type="text">
<select class="ddlCountry">
</select>

index.js

import { postcodeLookup, checkAddressListExists } from 'postcode-lookup-psl'

window.onload = function () {
    postcodeLookupInit();
};


const postcodeLookupInit = async () => {
    const txtPostcode = document.querySelector(".txtPostcode");
    txtPostcode.addEventListener('keyup', async () => {
        // Creates divAddressList if it doesn't already exist
        let divAddressList = checkAddressListExists(txtPostcode);

        divAddressList.appendChild(
            await postcodeLookup({
            postcode: txtPostcode.value.toString(),
            api_key: 'my_api_key',
            provider: 'my_postcode_lookup_provider
            })
        )
    });
}

If any of the fields listed are not found on the page then the value (when selected from the address list) are stored in a cookie so it can still be accessed.

Options

Option	Type	Default	Description
Postcode	string	null	The postcode to retrieve
api_key	string	null	Your postcode provider API key
provider	string	null	Your postcode provider
addDisplayLabel	booelan	false	When turned on this will append a label beneath the postcode field with the selected address. Use this option when the address fields are not visibly populated.
classNames	Object	null	An object of selectors for identifying address fields (see class name table below)

---

classNames

Option	Type	Default	Description
postcode	string	txtPostcode	The selector for the postcode field
addressLine1	txtAddress1	null	The selector for the address line 1 field
addressLine2	txtAddress2	null	The selector for the address line 2 field
addressLine3	txtAddress3	false	The selector for the address line 3 field
town	string	txtTown	The selector for the town field
county	string	txtCounty	The selector for the county field
country	string	ddlCountry	The selector for the country field