Is there a way to remove partial postcodes from GoogleMaps autocomplete dropdown?

Question

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;

Answer 1

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:

1. Probably not compliant with clause 3.2.3.(j) of the Google Maps Platform Terms of Service: (j) No Modifying Search Results Integrity. Customer will not modify any of the Google Maps Core Services’ search results.. You would need to seek legal advice about this.
2. The resulting user experience would be that typing 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.