google maps autocomplete first city or postal code then streets by city

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<div class="well container">
    <form role="form">
        <div class="form-group">
            <label for="locality" class="sr-only">Stadt oder PLZ</label>
            <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
            <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p>
        </div>
        <div class="form-group">
            <label for="route" class="sr-only">Straße / Hausnummer</label>
            <div class="row">
                <div class="col-xs-6">
                    <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" />
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" />
                </div>
            </div>
        </div>
    </form>
</div>

JavaScript

var localityInput = document.getElementById('locality');
var localityOptions = {
    types: ['geocode'], //['(cities)'], geocode to allow postal_code
    componentRestrictions: {
        country: 'de'
    }
};
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    $('#route').attr('disabled', false).focus();
    $('#street_number').attr('disabled', false);

    var boundsByCity = autocomplete.getPlace().geometry.viewport;
    var routeInput = document.getElementById('route');
    var routeOptions = {
        bounds: boundsByCity,
        types: ['geocode']
    };
    new google.maps.places.Autocomplete(routeInput, routeOptions);
});