谷歌地理编码建议结果出现在模态背后

Question

我的谷歌地理编码建议有问题。我有一个模态，显示一个表格来完成一个地址。我已经实现了地理编码以简化地址填充，但建议出现在模态背后，如下所示：

这里的一些代码：

实现地理编码的JS：

GoogleGeocode = (function () {
var _api = {};
var _googleApiRetrievedOk = false;
var _autocompleteEvent;
var _addressInputId, _zipCodeInputId, _countryInputId, _countryComboboxId;
var _componentToRetrieve = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function loadGoogleApis() {
    // Importar fuentes
    $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500'));

    // Importar api Places
    $('head').append($('<script type="text/javascript" />').attr('src', 'https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&callback=GoogleGeocode.GoogleGeocodeInit'));
}

function googleGeocodeInit() {
    _googleApiRetrievedOk = true;
}

$(document).ready(loadGoogleApis);

return _api;
})();

查看哪个支持模态：

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-footer">
        <div class="col-md-6 col-md-offset-1">
            <h2>@T("StudentData")</h2>
        </div>
        <button type="button" class="btn btn-CTA" data-dismiss="modal">X</button>
    </div>
    <div class="modal-header">
        @Html.Action("PrepareStudentDataModel", "Topic")
    </div>
</div>

调用Google地理编码的部分视图：

<div class="form-group row">
    <div class="col-md-12">
        @Html.TextAreaFor(model => model.Address1, new { @class = "form-control", placeholder = @T("wke.checkout.StudentAddress.geocodeaddress") })
        @Html.ValidationMessageFor(model => model.Address1)
        <span class="col-md-6 col-xs-6 field-validation-valid" id="StudentAddress_address1MessageValidation" style="visibility: hidden;">
            @T("wke.checkout.StudentAddress.messagevalidation")
        </span>
    </div>
</div>