google autofill API for multiple text box

问题

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>

回答1:

The problem is that you have three div's with the same id="loc"; however, the id should be unique. So when you run your code, once compiler sees the first id it uses it and it doesn't go further to search for the next one.

To fix that you need to give different id to each div, and create autocomplete variable for each div. You might as well create separate listeners, but I leave it up to you.

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


}

来源：https://stackoverflow.com/questions/31469778/google-autofill-api-for-multiple-text-box

标签

javascript

html

autofill