Use external address lookup APIs
Use external address lookup APIs (getaddress.io)
You must define javascript function wpo_get_address_autocomplete_init.
Sample code, you must replace YOUR_API_KEY with your key.
add_filter('wpo_custom_init_autocomplete_js_function', function () {
return 'wpo_get_address_autocomplete_init';
});
add_filter('wpo_custom_init_autocomplete_placeholder', function () {
return 'Search by Postcode';
});
add_action('wpo_before_render_html_app', function () {
?>
<style><span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
.wpo-custom-autocomplete-list {
position: absolute;
background-color: white;
width: 96%;
padding: 10px;
z-index: 100;
max-height: 200px;
overflow-y: scroll;
}
.wpo-custom-autocomplete-list li {
cursor: pointer;
}
</style>
<script src="https://getaddress.io/js/jquery.getAddress-2.0.8.min.js"></script>
<!-- Add after your form -->
<script>
function wpo_get_address_autocomplete_init(elem, selectedCallback) {
var on_select = function (v) {
selectedCallback({
address_1: v.line_1,
address_2: v.line_2 || v.line_3 || v.line_4 || v.locality,
city: v.town_or_city,
country: "GB",
lat: v.latitude,
lng: v.longitude,
postcode: v.postcode,
state: v.county,
street_number: v.building_number,
});
jQuery(elem).val('').trigger('input');
}
jQuery(elem).on('input', function () {
if (!jQuery(this).val()) {
jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
return;
}
jQuery.get(
'https://api.getaddress.io/find/' + jQuery(this).val(),
{
'api-key': 'YOUR_API_KEY',
expand: true,
},
function (d) {
var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');
d.addresses.forEach(function (v, i) {
ul.append(jQuery('<li data-index="'+ i +'">'+ (v.formatted_address.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {
on_select(
Object.assign({}, v, {
latitude: d.latitude,
longitude: d.longitude,
postcode: d.postcode,
})
);
})
);
});
jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
jQuery(elem).after(ul);
}, 'json');
});
}
</script>
<?php
});
Use external address lookup APIs (craftyclicks.co.uk)
You must define javascript function wpo_get_address_autocomplete_init
Sample code, you must replace YOUR_API_KEY with your key.
add_action('wpo_before_render_html_app', function () {
?>
<style>
.wpo-custom-autocomplete-list {
position: absolute;
background-color: white;
width: 96%;
padding: 10px;
z-index: 100;
max-height: 200px;
overflow-y: scroll;
}
.wpo-custom-autocomplete-list li {
cursor: pointer;
}
</style>
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script>
function wpo_get_address_autocomplete_init(elem, selectedCallback) {
var key_api = 'YOUR_API_KEY '; //PUT YOUR API KEY
var on_select_address = function (v) {
jQuery.get(
'https://api.craftyclicks.co.uk/address/1.1/retrieve',
{
'key': key_api,
'country': 'GB',
'id': v.id,
'lines': 5,
},
function (a) {
result = a.result;
selectedCallback({
address_1: result.line_1,
address_2: result.line_2 || result.line_3 || result.line_4 || result.line_5,
city: result.locality,
country: "GB",
postcode: result.postal_code,
state: result.province_name,
street_number: result.building_number,
});
jQuery(elem).val('').trigger('input');
}
);
};
var on_select_group = function (v) {
jQuery.get(
'https://api.craftyclicks.co.uk/address/1.1/find',
{
'key': key_api,
'query': jQuery(elem).val(),
'country': 'GB',
'id': v.id,
},
function (d) {
var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');
d.results.forEach(function (a, i) {
ul.append(jQuery('<li data-index="'+ i +'">'+ (a.labels.filter(function () { return !!a; }).join(' ')) +'</li>').on('click', function () {
on_select_address(
Object.assign({}, a)
);
})
);
});
jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
jQuery(elem).after(ul);
}
);
};
jQuery(elem).on('input', function () {
if (!jQuery(this).val()) {
jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
return;
}
jQuery.get(
'https://api.craftyclicks.co.uk/address/1.1/find',
{
'key': key_api,
'query': jQuery(this).val(),
'country': 'GB',
},
function (d) {
var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');
d.results.forEach(function (v, i) {
if(v.count == 1) {
ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {
on_select_address(
Object.assign({}, v)
);
})
);
}
else {
ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {
on_select_group(
Object.assign({}, v)
);
})
);
}
});
jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
jQuery(elem).after(ul);
},
'json');
});
}
</script>
<?php
});
add_filter('wpo_custom_init_autocomplete_js_function', function () {
return 'wpo_get_address_autocomplete_init';
});
add_filter('wpo_custom_init_autocomplete_placeholder', function ($placeholder) {
return $placeholder;
});