谷歌将部分页面加载后自动完成不起作用 ASP.Net MVC

我正在使用jquery .load（）加载带有地址表单的部分页面。这将起作用并打开部分页面中包含的模式窗口。

然后我想在模态表单中的第一个字段上创建一个自动完成功能，但当我开始键入时没有任何反应。我在控制台中没有看到任何错误。

猜这与我加载所有内容并渲染它的顺序有关，但不确定！

// button is clicked and the code below is called to load the partial page (modal) into the html page
$('#modalContainer').load(scope.enumControllers.GetAddressDetails, model, function(response, status, xhr) {
  scope.setActivityIndicator('off');
  if (status === 'error') {
    scope.showAlert('An error occurred loading the Change Address Window.', 'error')
    return;
  }
  $('#modelAddressDetails').modal('show');
  // configure autocomplete for address field
  var searchAddressInput = document.getElementById('address1Change');
  var searchAddressOptions = {
    types: ['geocode']
  }
  var addressAutocomplete = new google.maps.places.Autocomplete(searchAddressInput, searchAddressOptions);
});

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykeyhere&v=3.exp&&amp;libraries=places"></script>
<div id="modalContainer"></div>

这是加载到modalContainer中的部分页面

@model TpCrm.Areas.Organizations.Models.OrganizationDetailViewModel
<style>
  .form-control {
    max-width: 480px;
  }
  .modal-dialog {
    width: 0;
  }
</style>
<div id="modelAddressDetails" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h3 class="modal-title">Modify Address And Search</h3>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="address1">Address</label>
            <input type="text" class="form-control" id="address1Change" placeholder="ex. 123 TradePulse Ave" value=@Model.Address.Address1>
          </div>
          <div class="form-group">
            <label for="address2">Apt. or Bld. Number</label>
            <input type="text" class="form-control" id="address2Change" placeholder="ex. #305" value=@Model.Address.Address2>
          </div>
          <div class="form-group">
            <label for="city">City</label>
            <input type="text" class="form-control" id="cityChange" placeholder="ex. San Francisco" value=@Model.Address.City>
          </div>
          <div class="form-group">
            <label for="state">State</label>
            <input type="text" class="form-control" id="stateChange" placeholder="ex. California" value=@Model.Address.State>
          </div>
          <div class="form-group">
            <label for="postalCode">Postal Code</label>
            <input type="text" class="form-control" id="postalCodeChange" placeholder="ex. 94102" value=@Model.Address.PostalCode>
          </div>
          <div class="form-group">
            <label for="country">Country</label>
            <input type="text" class="form-control" id="countryChange" placeholder="ex. United States" value=@Model.Address.Country>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
        <button id="btnAddressSearch" type="button" class="btn btn-primary btn-lg">Search</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->