Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<!-- Include plugin file -->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://getaddress.io/js/jquery.getAddress-2.0.8.min.js"></script>
</head>

<body>
    <!-- Postcode field -->
<div id="postcode_lookup"></div>

<!-- Add to your existing form -->
<label>First Address Line</label>
<input id="line1" type="text">

<label>Second Address Line</label>
<input id="line2" type="text">

<label>Third Address Line</label>
<input id="line3" type="text">

<label>Town</label>
<input id="town" type="text">

<label>County</label>
<input id="county" type="text">

<label>Postcode</label>
<input id="postcode" type="text">

<script>
$('#postcode_lookup').getAddress({
    api_key: '__replace_this_with_your_api_key',
    <!--  Or use your own endpoint - api_endpoint:https://your-web-site.com/getAddress, -->
    output_fields:{
        line_1: '#line1',
        line_2: '#line2',
        line_3: '#line3',
        post_town: '#town',
        county: '#county',
        postcode: '#postcode'
    },
<!--  Optionally register callbacks at specific stages -->
    onLookupSuccess: function(data){/* Your custom code */},
    onLookupError: function(){/* Your custom code */},
    onAddressSelected: function(elem,index){/* Your custom code */}
});
</script>
</body>
</html>