Output town/city in input rather than full place using Places Autocomplete

Question

Currently, I am using regions for my places autocomplete input. I previously used cities before regions as this outputted the town/city in the input.

But now I want to be able to input the postcode or town/city and still have the output as just the town/city.

Basically, I want to use regions but have the output of cities into the input element.

Examples below:

Input: London
Actual Output: London, UK (This is fine)
Desired Output: London, UK 

Input: SW1A
Actual Output: London SW1A, UK (This is not fine)
Desired Output: London, UK 

Input: NW3 7JR
Actual Output: Hampstead Lane, London NW3 7JR, UK (This is not fine)
Desired Output: London, UK

The Javascript currently using:

//Function for Places Autocomplete
function activatePlacesSearch(){
    var input = document.getElementById('id_local_area');
    var options = {
        types: ['(regions)'],
        componentRestrictions: {country: 'gb'}};
    var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Answer 1

In short, this will never happen.

Place Autocomplete will always echo the input back to the user, so if part of a postal code is typed, at least that part of the postal code will be part of the prediction. With the types= parameter you can restrict predictions, but in the examples above that will only cause no predictions to be returned.

There are a few things you can do:

1. Take the structured_formatting.secondary_text which, while not always exactly the "London, UK" level you want, it is always available on the Place Autocomplete response, so no need to do even a Details request for the Place ID.
2. Request details for this Place ID (from either Geocoding API or Place Details) and reverse geocode its location latlng in the Geocoding API. That will give you all political features that contain the latlng. Then you need to be careful about which one represents the "city" or whatever it is you want. See explanation about this in https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete-addressform