I need to remove the partial postcode (in the red box) from the suggestions dropdown on autocomplete, so that users can only select a full postcode.
How do I achieve this or does anyone have a better suggestion?
I think everything works as it should but my client thinks to be able to select a partial postcode is too confusing.
This is my code:
let autocomplete;
let address1Field;
let postalField;
function initAutocomplete() {
address1Field = document.querySelector("#ship-address");
postalField = document.querySelector("#postcode");
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: {
country: ["gb"]
},
fields: ["address_components", "geometry"],
});
address1Field.focus();
autocomplete.addListener("place_changed", fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
for (const component of place.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number":
{
address1 = `${component.long_name} ${address1}`;
break;
}
case "route":
{
address1 += component.short_name;
break;
}
case "sublocality_level_1":
{
address1 += component.long_name;
break;
}
case "postal_code":
{
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix":
{
postcode = `${postcode}-${component.long_name}`;
break;
}
case "postal_town":
document.querySelector("#postal_town").value = component.long_name;
break;
case "locality":
// document.querySelector("#locality").value = component.long_name;
break;
case "administrative_area_level_1":
{
// document.querySelector("#state").value = component.short_name;
break;
}
case "administrative_area_level_2":
document.querySelector("#county").value = component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
document.getElementById('details').innerHTML = '<input name="latitude" type="hidden" id="latitude" value="' + place.geometry.location.lat() + '"><input name="longitude" type="hidden" id="longitude" value="' + place.geometry.location.lng() + '">';
}
window.initAutocomplete = initAutocomplete;
There is no easy way to do this, because those partial postal codes kind of are postal codes; they are postal code prefixes which is kind of a postal code in the Places API.
You can file a feature request for Place Autocomplete to support excluding certain types. Such a feature would allow you to request predictions including types=postal_code
and excluding types=postal_code_prefix
.
Currently, requesting predictions with types=postal_code
will include predictions with types: ["postal_code_prefix", "postal_code"]
.
Without such a feature, the closest to the desired effect could be building your own widget, retrieve predictions using the Place Autocomplete Service and discarding those predictions withtypes: ["postal_code_prefix", "postal_code"]
. There are 2 significant problems with this approach:
rg1
produces only one prediction (RG1 8EQ), or possible no predictions at all.All the above might be too much hassle considering that as soon as a blank space is added to the input (e.g. "rg1 "
) most of the predictions will be for full precision postal codes, and as soon as an additional character is added (e.g. "rg1 1"
) all the predictions will be for full precision postal codes.
This is the intended behavior, users are expected to disambiguate short inputs like rg1
by adding a character, a blank space can often make a big difference.