在jsf AJAX调用Submit之后，自动完成API (GooglePlaces API)丢失了与html元素的绑定

Question

我已经绑定了autocomplete google Places API V3与一个文本框，这实际上是一个JSF文本框。通过下面的代码，你可以看到我的API与文本框的绑定。

  var input =(document.getElementById('address'));
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

上面的代码工作得很好，当JSF页面第一次加载时，如果它被刷新，也工作得很好。

但是当我点击表单提交时，与文本框绑定的自动完成的位置API会丢失。下面的代码是JSF表单提交。

<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing,geometry,places&amp;sensor=false"></script>
<script>
var map;
var geocoder;
function initialize() {
    // Specifies the google Map properties
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom : 4,
        center : new google.maps.LatLng(37.5499, -95.5524),
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        mapTypeControl : false
    });
    // Allowing to change the Address to GeoCode.
    geocoder = new google.maps.Geocoder({});
    var options = {
        types : [ 'geocode' ],
        componentRestrictions : {
            country : "us"
        }
    };
    var input = (document.getElementById('address'));
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.bindTo('bounds', map);
}
// codeAddress()
function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            document.getElementById("lat").value = results[0].geometry.location
                    .lat();
            document.getElementById("lng").value = results[0].geometry.location
                    .lng();
        }
    });
}
</script>
    <div id="content-01">
        <h:form prependId="false">
            <div id="panel-Three">
                <h:outputLabel value="ENTER ADDRESS"
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText style="margin-left: 2px" type="text" id="address" size="40"
                    onblur="codeAddress()" value="#{GeoCodeRegion.address}"/>
                <h:outputLabel value="LATTITUDE : "
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText id="lat" value="#{GeoCodeRegion.lattitude}"
                    style="margin-left: 2px" />
                <h:outputLabel value="LONGTITUDE : "
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText id="lng" value="#{GeoCodeRegion.longtitude}"
                    style="margin-left: 2px" />
                <br />
                <h:commandButton type="submit" value="Submit Value">
                    <f:ajax listener="#{GeoCodeRegion.passGeoValues()}" event="click"
                        render="@form" execute="@form"></f:ajax>
                </h:commandButton>
                <h:panelGroup id="checkStatus">
                    <h:outputLabel id="responseCheck"
                        value="#{GeoCodeRegion.responseTextResult}"
                        style="vertical-align: bottom;" />
                </h:panelGroup>
            </div>
        </h:form>
    </div>

实际上这是一个Ajax调用。不知道为什么Places API绑定在表单提交后会丢失。请帮我解释一下为什么会这样

Answer 1

解决了这个问题，通过提供JSF inputtext 自动完成选项作为false。

代码级别更改。

<h:inputText style="margin-left: 2px" type="text" autocomplete=false id="address" size="40"
                onblur="codeAddress()" value="#{GeoCodeRegion.address}"/>