Jquery Google 自动完成功能不工作 - 没有错误

Question

我之前有过这个工作，今天又回来了，但我似乎无法让它工作，我很确定我没有改变任何东西。

这里是 html:

 <div class='form-row'>
<div class='col-6 form-group'>
<label class='control-label'>Location</label>
<input class='form-control' id='autocomplete'
placeholder='Location' size='4' type='text'>
<input class="input hidden" disabled="true" id="route">
<input class="input hidden" disabled="true" id=
"locality"> <input class="input hidden" disabled="true"
id="administrative_area_level_1"> <input class=
"input hidden" disabled="true" id=
"administrative_area_level_2"> <input class=
"input hidden" disabled="true" id="postal_code">
<input class="input hidden" disabled="true" id=
"country">
</div>
   <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

JS

var placeSearch, autocomplete;
var componentForm = {
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    country: 'long_name',
    postal_code: 'short_name'
};
function clear(){
    console.log("clr");
    $("input.hidden").val("");
}
function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
        types: ['geocode']
    });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();   

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}

$(document).ready(function(){
    $( "#autocomplete" ).on('keyup',function() { 
        $("input.hidden").val('');
    });
});

我没有收到任何错误，所以我不确定出了什么问题。它应该获取自动完成建议并填写字段，但它什么也没做。谁能帮助我了解我哪里出错了？

Answer 1

你从不打电话给initialize()。您应该在页面加载时调用它。

Jquery Google 自动完成功能不工作 - 没有错误

Jquery Google Autocomplete not working - No error

javascript

jquery

html

google-maps