I have done this in the past using a HTML page embedded inside a form. I think I used this API - https://getaddress.io/
I have pasted the code below. Its a little crude but you can use it as reference.
If you wanted to use what I did below then you would need to download the jquery.min.js file and also a local copy of the api code so it can work offline.
<!DOCTYPE html>
<html>
<head>
<meta charset="LiberationSans-Regular">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Post Code Lookup</title>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, user-scalable=false">
<script type="text/javascript" src="JSBridge.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<style type="text/css">
@font-face {
font-family: LiberationSans-Regular;
src: url(LiberationSans-Regular.ttf);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 2px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 2px; /* Add a top margin */
margin-bottom: 2px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #0066CC;
color: white;
padding: 12px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
label {
font-size: 14px;
}
body {
font-family: LiberationSans-Regular;
}
#setAddress {
background-color: #0066CC;
color: #FFFFFF;
border: none;
}
#idpc_button
{
background-color: #0066CC;
color: #FFFFFF;
border: none;
}
</style>
</head>
<body>
<div id="lookup_field"></div>
</br>
<!-- Add to your existing form -->
<label>First Address Line: </label>
<input id="first_line" type="text"/>
<label>Second Address Line: </label>
<input id="second_line" type="text"/>
<label>Town: </label>
<input id="post_town" type="text"/>
<label>Postcode: </label>
<input id="postcode" type="text"/>
<label>Latitude: </label>
<input id="latitude" type="text"/>
<label>Longitude: </label>
<input id="longitude" type="text"/>
<button type="button" id="setAddress" onclick="setAddressBuilding();setAddressLine1();
setAddressCity();setAddressPostcode();
setAddressLong(); setAddressLat();">Set Address</button>
<script type="text/javascript" src="postcodes.min.js"></script>
<script type="text/javascript">
// Add this after your form
$('#lookup_field').setupPostcodeLookup({
// Add your API key
api_key: 'ADD API KEY HERE',
// Identify your fields with CSS selectors
output_fields: {
line_1: '#first_line',
line_2: '#second_line',
post_town: '#post_town',
postcode: '#postcode',
longitude: '#longitude',
latitude: '#latitude'
}
});
</script>
<script type="text/javascript">
function setAddressBuilding()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addressline1 = document.getElementById("first_line").value;
var addressline2 = document.getElementById("second_line").value;
if(addressline1 && addressline2)
{
entityForm.entity.properties["address_building"] = addressline1;
entityForm.entity.properties["address_line1"] = addressline2;
}
},
MobileCRM.bridge.alert, null);
}
function setAddressLine1()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addressline1 = document.getElementById("first_line").value;
var addressline2 = document.getElementById("second_line").value;
if(addressline1 && !addressline2)
{
entityForm.entity.properties["address_line1"] = addressline1;
}
},
MobileCRM.bridge.alert, null);
}
function setAddressCity()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addresstown = document.getElementById("post_town").value;
if(addresstown)
{
entityForm.entity.properties["address_city"] = addresstown;
}
},
MobileCRM.bridge.alert, null);
}
function setAddressPostcode()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addresspostcode = document.getElementById("postcode").value;
if(addresspostcode)
{
entityForm.entity.properties["address_postalcode"] = addresspostcode;
}
},
MobileCRM.bridge.alert, null);
}
function setAddressLong()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addresslong = document.getElementById("longitude").value;
if(addresslong)
{
entityForm.entity.properties["address1_longitude"] = addresslong;
}
},
MobileCRM.bridge.alert, null);
}
function setAddressLat()
{
MobileCRM.UI.EntityForm.requestObject(
function(entityForm){
var addresslat = document.getElementById("latitude").value;
if(addresslat)
{
entityForm.entity.properties["address1_latitude"] = addresslat;
}
},
MobileCRM.bridge.alert, null);
}
</script>
</body>
</html>
