gpt4 book ai didi

javascript - 用于多个文本框的谷歌自动填充API

转载 作者:太空宇宙 更新时间:2023-11-04 13:12:30 24 4
gpt4 key购买 nike

我试图让 3 个框使用 google API 的 javascript 在填写地址时提供建议。但不幸的是它只适用于 1 个文本框基本城市。其他两个不响应 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>

最佳答案

问题是您有三个具有相同 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>

关于javascript - 用于多个文本框的谷歌自动填充API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31469778/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com