使用“后退”按钮时，Google Maps Places自动完成填充不正确

Question

我有一个简单的地址表格，当我继续下一页然后单击“后退”按钮时，地址数据被弄乱了。地址丢失，address2字段包含城市，city字段包含邮政编码，而zip丢失...

如果我删除底部的google maps脚本，一切正常，但包括它，我将得到错误的行为。我已经使自动完成尽可能简单，甚至删除了自动完成的fillInAddress（）片段。不知道从这里去哪里。任何帮助表示赞赏。

[![<script src="../assets/jquery-2.1.4.min.js"></script>
{% block content %}
    <div class="customer js-cart-form-step js-form-wrap col-xs-12 col-sm-6 col-sm-pull-6">
        <h5>Customer Information</h5>
        <div class="email row">
            <div class="col-xs-12">
                <div class="moving-input input-required input-email">
                    <input class="stripspaces" type="text" id="shipping_email" autocapitalize="off" value="{{ lead.email }}" autocomplete="on">
                    <label>Email</label>    
                </div>                              
            </div>
        </div>
        <h5>Shipping Address</h5>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="moving-input input-required input-firstname">
                    <input type="text" id="shipping_first_name" value="{{ lead.firstname }}"  autocomplete="on">
                    <label>First Name</label>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="moving-input input-required input-lastname">
                    <input type="text" id="shipping_last_name" autocomplete="on">
                    <label>Last Name</label>    
                </div>                                  
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="moving-input input-required input-address">
                    <input type="text" id="shipping_address" class="route street_number" placeholder="" autocomplete="on" >
                    <label>Address</label>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="moving-input">                          
                    <input type="text" id="shipping_address2" autocomplete="on">
                    <label>Apartment/Suite #</label>        
                </div>                              
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="moving-input  input-required input-city">
                    <input type="text" id="shipping_city" class="locality" autocomplete="on">
                    <label>City</label> 
                </div>
            </div>
            <div id="shipping_state_input" class="col-xs-12 col-md-6">
                <div class="moving-input js-location-picker input-required">
                    <select id="shipping_state">
                        <option></option>
                        <option value="Alabama">Alabama</option>
                        <option value="Alaska">Alaska</option>
                        <option value="Arizona">Arizona</option>
                        <option value="Arkansas">Arkansas</option>
                        <option value="California">California</option>
                        <option value="Colorado">Colorado</option>
                        <option value="Connecticut">Connecticut</option>
                        <option value="Delaware">Delaware</option>
                        <option value="District of Columbia">District of Columbia</option>
                        <option value="Florida">Florida</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Hawaii">Hawaii</option>
                        <option value="Idaho">Idaho</option>
                        <option value="Illinois">Illinois</option>
                        <option value="Indiana">Indiana</option>
                        <option value="Iowa">Iowa</option>
                        <option value="Kansas">Kansas</option>
                        <option value="Kentucky">Kentucky</option>
                        <option value="Louisiana">Louisiana</option>
                        <option value="Maine">Maine</option>
                        <option value="Maryland">Maryland</option>
                        <option value="Massachusetts">Massachusetts</option>
                        <option value="Michigan">Michigan</option>
                        <option value="Minnesota">Minnesota</option>
                        <option value="Mississippi">Mississippi</option>
                        <option value="Missouri">Missouri</option>
                        <option value="Montana">Montana</option>
                        <option value="Nebraska">Nebraska</option>
                        <option value="Nevada">Nevada</option>
                        <option value="New Hampshire">New Hampshire</option>
                        <option value="New Jersey">New Jersey</option>
                        <option value="New Mexico">New Mexico</option>
                        <option value="New York">New York</option>
                        <option value="North Carolina">North Carolina</option>
                        <option value="North Dakota">North Dakota</option>
                        <option value="Ohio">Ohio</option>
                        <option value="Oklahoma">Oklahoma</option>
                        <option value="Oregon">Oregon</option>
                        <option value="Pennsylvania">Pennsylvania</option>
                        <option value="Rhode Island">Rhode Island</option>
                        <option value="South Carolina">South Carolina</option>
                        <option value="South Dakota">South Dakota</option>
                        <option value="Tennessee">Tennessee</option>
                        <option value="Texas">Texas</option>
                        <option value="Utah">Utah</option>
                        <option value="Vermont">Vermont</option>
                        <option value="Virginia">Virginia</option>
                        <option value="Washington">Washington</option>
                        <option value="West Virginia">West Virginia</option>
                        <option value="Wisconsin">Wisconsin</option>
                        <option value="Wyoming">Wyoming</option>
                    </select>
                    <label>State</label>        
                </div>                              
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-6">    
                <div class="moving-input input-required input-zip-code">    
                    <label>Zip</label>
                    <input type="text" id="shipping_zip" class="postal_code" maxlength="5"  autocomplete="on" class="prep">
                </div>
            </div>
            <div class="col-xs-12 col-md-6">    
                <div class="moving-input input-required input-phone">                               
                    <input id="shipping_phone" value="{{ lead.phone }}"  maxlength="10" autocomplete="on"  type="tel" pattern="\[0-9\]*" inputmode="numeric">
                    <label>Phone</label>
                </div>                                  
            </div>
        </div>
        <div class="row">
            <div class="form-message-error js-form-message-error col-xs-12">
                <p></p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-dark js-button-customer" tabindex="12">continue</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>

    function saveCustomerInfo(dto) {
        $.ajax("/api/saveCustomerInfo", {
            contentType: "application/x-www-form-urlencoded",
            data: { lead: dto },
            type: "POST",
            success: function(result, status, xhr) {
                if (result.ok !== true) {
                    console.log("FAIL saveCustomerInfo: " + result.debug);
                    Rollbar.error("API call to saveCustomerIfo failed",{debug: result.debug});
                } else {
                    window.location.href = "/checkout/shipping";
                }
            },
            error: function(xhr, status, error) {
                displayGenericError();
            }
        });
    };

    function saveLead(email) {
        var dto = {
            email: email
        };
        if (navigator.sendBeacon) {
            navigator.sendBeacon("/api/saveLead",JSON.stringify(dto));
        } else {
            $.post("/api/saveLead", dto);
        }
    };

    $(document).ready(function() {


        $('.js-button-customer').click(function(event) {

            var state_val = $('#shipping_state option:selected').text();

            $('.form-message-error p').text('');

            //var form_valid = validate_form($(this).closest('.js-form-wrap'));
            if (true) {
                var dto = {
                    firstname: $('#shipping_first_name').val().trim(),
                    lastname: $('#shipping_last_name').val().trim(),
                    email: $('#shipping_email').val().trim().toLowerCase(),
                    phone: $('#shipping_phone').val(),
                    address1: $('#shipping_address').val(),
                    address2: $('#shipping_address2').val(),
                    city: $('#shipping_city').val(),
                    state: state_val,
                    postalCode: $('#shipping_zip').val()            
                };
                saveCustomerInfo(dto);
            } else {

                $('.form-message-error').slideDown(400);
                $('.input-required input, textarea').focus(function() {
                    $('.form-message-error').slideUp(400);
                    $('.form-message-error p').text('');
                });
                var e = form_valid.errormsgs;
                var em = e.join('<br/>');
                $('.form-message-error p').append(em);

                event.preventDefault(); // stop if invalid
            };
        });
    });

    $('.summary-footer-desktop').hide();
    </script>

    <script>

    function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
       autocomplete = new google.maps.places.Autocomplete(
           /** @type {!HTMLInputElement} */(document.getElementById('shipping_address')),
           {});

      // When the user selects an address from the dropdown, populate the address
      // fields in the form.
      //autocomplete.addListener('place_changed', fillInAddress);
    }
  </script>


    <script src="https://maps.googleapis.com/maps/api/js?key={{config.GoogleAPIKey}}&libraries=places&callback=initAutocomplete" async defer></script>
{% endblock %}][1]][1]