jQuery Plugin

You can either sign up for a FREE trial account which lasts for 20 days, or use your live account.

You will need your API key to use the jQuery plugin (check your order email or login to your account).

Please note the jQuery pluging only works with a premise level account.

Add a jQuery library reference within the head tags of your web page if it doesn't contain one.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Add a reference to our plugin within the head tags of your web page.

<script src="https://ws1.postcodesoftware.co.uk/lookup.min.js"></script>

Simply copy and paste the code below into your website then add your API key to start performing address lookups.

<div id="postcode_lookup"></div>
<input id="line1" type="text" placeholder="Address" />
<input id="line2" type="text" placeholder="Address Line 2" />
<input id="line3" type="text" placeholder="Address Line 3" />
<input id="line4" type="text" placeholder="Address Line 4" />
<input id="town" type="text" placeholder="Town" />
<input id="postcode" type="text" placeholder="Postcode" />
<script>
$('#postcode_lookup').getAddress({
    api_key: 'your_key_goes_here',
    output_fields: {
        // Form element ID's have been added below
        line1: '#line1',
        line2: '#line2',
        line3: '#line3',
        line4: '#line4',
        town: '#town',
        postcode: '#postcode'
    }
});
</script>

Address lines can be reduced by removing line4 or a combination of line4, line3, line2. Address elements will be automatically restructured in a logical manor.
E.g.

output_fields: {
    line1: '#line1',
    line2: '#line2',
    line3: '#line3',
    town: '#town',
    postcode: '#postcode'
}

output_fields: {
    line1: '#line1',
    line2: '#line2',
    town: '#town',
    postcode: '#postcode'
}

output_fields: {
    line1: '#line1',
    town: '#town',
    postcode: '#postcode'
}

Your API key can be locked to a specific website(s) by adding its address to the referrer section within your account.
Any text entered within the referrer section will be searched for within the address of the website making the lookup request.
A semi colon (;) can be used to separate multiple referrer text values when you need to use your API key on multiple websites.

Please see the table below for further clarification.

Any other sites attempting to make a lookup request using your API key will be presented with the following message 'Referrer does not match'. Please note if the address of the website making the request cannot be obtained the lookup will be allowed to occur.

Validation text can be passed as an option within the configuration object. This will need to match the corresponding validation text set within your account. An incorrect match will give the following response 'Validation Text does not match'

<script>
$('#postcode_lookup').getAddress({
    api_key: 'your_key_goes_here',
    // Validation Text option
    validation_text: 'Licensed for sole use by PostcodeSoftware',
    output_fields: {
        line1: '#line1',
        line2: '#line2',
        line3: '#line3',
        line4: '#line4',
        town: '#town',
        postcode: '#postcode'
    }
});
</script>

Your company name will be automatically displayed along the bottom of the search results dropdown.
E.g. 'PAF data licensed to PostcodeSoftware'

• Demo
• HTML
• jQuery

<!-- Postcode Field -->
<div id="postcode_lookup"></div>
<!-- Address Fields -->
<input id="line1" type="text" placeholder="Address Line 1" />
<input id="line2" type="text" placeholder="Address Line 2" />
<input id="line3" type="text" placeholder="Address Line 3" />
<input id="line4" type="text" placeholder="Address Line 4" />
<input id="town" type="text" placeholder="Town" />
<input id="postcode" type="text" placeholder="Postcode" />

<!-- Add below form -->
<script>
    $('#postcode_lookup').getAddress({
        api_key: 'Enter-your-API-key',
        output_fields: {
            line1: '#line1',
            line2: '#line2',
            line3: '#line3',
            line4: '#line4',                                        
            town: '#town',
            postcode: '#postcode',
        }
    })
</script>

• Demo
• HTML
• jQuery

<!-- Postcode Field -->
<div id="postcode_lookup"></div>
<!-- Address Fields -->
<input id="organisation" type="text" placeholder="Organisation" />
<input id="line1" type="text" placeholder="Address Line 1" />
<input id="line2" type="text" placeholder="Address Line 2" />
<input id="line3" type="text" placeholder="Address Line 3" />
<input id="town" type="text" placeholder="Town" />
<input id="postcode" type="text" placeholder="Postcode" />

<!-- Add below form -->
<script>
    $('#postcode_lookup').getAddress({
        api_key: 'Enter-your-API-key',
        // Prevents the organisation from appearing within address line1
        line1_no_organisation: 'true',
        output_fields: {
            organisation: '#organisation',
            line1: '#line1',
            line2: '#line2',
            line3: '#line3',
            town: '#town',
            postcode: '#postcode',
        }
    })
</script>

• Demo
• HTML
• jQuery

<!-- Postcode Field -->
<div id="postcode_lookup"></div>
<!-- Address Fields -->
<input id="line1" type="text" placeholder="Address" />
<input id="line2" type="text" placeholder="Address Line 2" />
<input id="line3" type="text" placeholder="Address Line 3" />
<input id="line4" type="text" placeholder="Address Line 4" />
<input id="town" type="text" placeholder="Town" />
<input id="postcode" type="text" placeholder="Postcode" />

<!-- Add below form -->
<script>
    $('#postcode_lookup').getAddress({
        api_key: 'Enter-your-API-key',
        // Will add a button to the postcode search field
        button: 'true',
        output_fields: {
            line1: '#line1',
            line2: '#line2',
            line3: '#line3',
            line4: '#line4',
            town: '#town',
            postcode: '#postcode',                        
        }
    })
</script>

• Demo
• HTML
• jQuery

<!-- Postcode Field -->
<div id="postcode_lookup"></div>
<!-- Address Fields -->
<input id="organisation" type="text" placeholder="Organisation" />
<textarea id="address" placeholder="Address Line 1 etc."></textarea>

<!-- Add below form -->
<script>
    $('#postcode_lookup').getAddress({
        api_key: 'Enter-your-API-key',
        // Prevents the organisation from appearing within the textarea
        block_no_organisation: 'true',
        output_fields: {
            organisation: '#organisation',
            block: '#address'
        }
    })
</script>