Back to Snippets List

address - Address Lookup

<!-- This form element isn't required -->
<form action="#" method="GET">

<fieldset class="postcode-search">
    <div class="form-group">
        <label for="postcode">
            <span class="form-label-bold">Postcode</span>
        </label>
        <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

        <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
            <b data-postcode-search="postcode_term"></b>
            <button class="text-button" data-postcode-search="change">Change</button>
        </p>

        <span class="field-validation-error" data-valmsg-for="postcode" data-valmsg-replace="true"></span>

        <div class="js-hidden" data-postcode-search="results">

            <div class="form-select">
                <select class="form-select" name="postcode" id="postcode" data-val="true" data-val-required="Select an address from the drop down menu"></select>
                <span class="arrow"></span>
            </div>

            <input type="hidden" name="result-saontext" data-result="saontext">
            <input type="hidden" name="result-paontext" data-result="paontext">
            <input type="hidden" name="result-paonrange" data-result="paonrange">
            <input type="hidden" name="result-streetname" data-result="streetname">
            <input type="hidden" name="result-locality" data-result="locality">
            <input type="hidden" name="result-town" data-result="town">
            <input type="hidden" name="result-county" data-result="county">
            <input type="hidden" name="result-postcode" data-result="postcode">
            <input type="hidden" name="result-uprn" data-result="uprn">
        </div>

        <div class="js-hidden" data-postcode-search="fallback">
            <p class="indent-error-message">Please type your address below.</p>

            <div class="form-group">
                <label for="building-and-street" class="form-label-bold">Building and street</label>
                <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
                <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
            </div>

            <div class="form-group">
                <label for="town-or-city" class="form-label-bold">Town or city</label>
                <input type="text" class="form-control" id="town-or-city" name="town-or-city" data-address="town-or-city">
            </div>

            <div class="form-group">
                <label for="county" class="form-label-bold">County <span class="unbold">(optional)</span></label>
                <input type="text" class="form-control" id="county" name="county" data-address="county">
            </div>

            <div class="form-group">
                <label for="postcode" class="form-label-bold">Postcode</label>
                <input type="text" class="form-control" id="postcode" name="postcode" data-address="postcode">
            </div>
        </div>
    </div>

    <div class="form-group" data-postcode-search="button">
        <button class="button">Search for address</button>
    </div>
</fieldset>

<!-- Neither is this button, of </form> -->
<button class="button">Submit</button>
</form>

Usage Notes

The service only searches Medway postcodes, so:


How it works

On a high level, it fetches JSON from the service and returns that data in a <select> box.

Going deeper, it uses the $.getJSON() function, which can either be .done() of .fail(). Both cases are catered for.

The correct elements are selected using data attributes – the same attribute with a different value, like so:

<div data-postcode-search="search_term">...</div>
<div data-postcode-search="config">...</div>
<div data-postcode-search="results">...</div>
<div data-postcode-search="change">...</div>
<div data-postcode-search="out_of_area">...</div>
<div data-postcode-search="fallback">...</div>
<div data-postcode-search="button">...</div>

Take data-postcode-search="button" for example. The button itself doesn't have that attribute, but a parent <div> does, which means it can contain other stuff like hint text. We also get the benefit of removing all extra padding & margins caused by the container being there but the button being hidden.



Changelog

12th August 2015