I have successfully implemented the Loqate Address Verification control and managed to filter its address results based on a single country selected from a dropdown menu.
However, I am facing an issue where changing the country code in the dropdown menu does not update the country filter in the Loqate address service with the new value.
var addressControl;
var avOptions = { suppressAutocomplete: false, setCountryByIP: false };
$(function () {
addressControl = initialiseAddressValidation();
});
$("#CountryCode").change(function () {
if (addressControl) {
addressControl.destroy();
addressControl = null;
}
addressControl = initialiseAddressValidation();
});
function initialiseAddressValidation() {
avOptions.key = $("#avKey").val();
avOptions.countries = { codesList: $("#CountryCode").val() };
//other config truncated
}
The documentation provided by Loqate suggests that calling the .destroy() method when the country is changed should remove the control. I attempted setting it to null before recreating it with the new country code value, but the returned address results are still for the original country it was loaded with initially.
Is there a way to update the country filter of the Loqate address verifier without needing to reload the entire page?
Here is my updated solution, with valuable guidance from @SlapdashFox. This approach avoids having to recreate the control every time the country is changed:
$("#CountryCode").change(function () {
if (addressControl) {
addressControl.options.search.countries = $("#CountryCode").val();
} else {
addressControl = initialiseAddressValidation();
}
});