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