用于多个文本框的谷歌自动填充 API答案

【问题标题】：google autofill API for multiple text box用于多个文本框的谷歌自动填充 API
【发布时间】：2015-10-06 19:37:56
【问题描述】：

我正在尝试使用 3 个框来使用 google API 的 javascript 在填写地址时提供建议。但不幸的是，它仅适用于 1 个文本框 Base city。其他两个不响应 javascript

Javascript

       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
		</script>

<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc" name="City" class="form-control"  >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Location" class="form-control"  >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location" class="form-control"  >
</div>
</div>

【问题讨论】：

标签： javascript html autofill

【解决方案1】：

问题是你有三个具有相同 id="loc" 的 div；但是，id 应该是唯一的。因此，当您运行代码时，一旦编译器看到它使用它的第一个 id，它就不会进一步搜索下一个。

要解决这个问题，您需要为每个 div 提供不同的 id，并为每个 div 创建自动完成变量。您也可以创建单独的侦听器，但我将其留给您。

            var autocomplete1 = new google.maps.places.Autocomplete($("#loc1")[0], {});
            var autocomplete2 = new google.maps.places.Autocomplete($("#loc2")[0], {});
            var autocomplete3 = new google.maps.places.Autocomplete($("#loc3")[0], {});

            google.maps.event.addListener(autocomplete1, 'place_changed', function () {
                var place = autocomplete1.getPlace();
                console.log(place.address_components);
            });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
    <body>
        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Base City</label>
            <div class="col-md-3">
                <input type="text" id="loc1" name="City" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Base Location</label>
            <div class="col-md-3">
                <input type="text" id="loc2" name="Location" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Work Location</label>
            <div class="col-md-3">
                <input type="text" id="loc3" name="Work_Location" class="form-control">
            </div>
        </div>
    </body>

【讨论】：

【解决方案2】：

function initialize() {
    //debugger;
    // Create the autocomplete object, restricting the search
    // to geographical location types.
    var clsname = document.getElementsByClassName('autocomplet');

    for (var i = 0; i < clsname.length; i++) {
        var id = clsname[i].id;
        autocomplete = new google.maps.places.Autocomplete(

        (document.getElementById(id)), {
            types: ['geocode']
        });
    }


}

【讨论】：