用于多个文本框的谷歌自动填充 API [英] google autofill API for multiple text box

查看：20
本文介绍了用于多个文本框的谷歌自动填充 API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 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><脚本>var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});google.maps.event.addListener(autocomplete, 'place_changed', function() {var place = autocomplete.getPlace();控制台日志(地方.地址_组件)；});</script>

<label class="col-md-3 control-label" for="example-text-input">基础城市</label><div class="col-md-3"><input type="text" id="loc" name="City" class="form-control" >

<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">基本位置</label><div class="col-md-3"><input type="text" id="loc" name="Location" class="form-control" >

<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">工作地点</label><div class="col-md-3"><input type="text" id="loc" name="Work_Location" class="form-control" >

解决方案 

function initialize() {//调试器；//创建自动完成对象，限制搜索//到地理位置类型.var clsname = document.getElementsByClassName('自动完成');for (var i = 0; i < clsname.length; i++) {var id = clsname[i].id;自动完成 = 新的 google.maps.places.Autocomplete((document.getElementById(id)), {类型:['地理编码']});}}

I am trying to have 3 boxes to use the javascript of google API to provide suggestion when filling addresses.But unfortunately it works for only 1 text box Base city.Other two dont respond to 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>

解决方案 

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']
        });
    }


}

这篇关于用于多个文本框的谷歌自动填充 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆