谷歌Places Autocomplete无提示及jQuery绑定响应值至输入框问题

这个操作其实很简单，核心就是用jQuery的val()方法给文本框赋值。假设你已经通过AJAX请求拿到了接口的响应数据，直接把响应里的目标字段提取出来，设置到文本框就好，给你举个实际例子：

// 用jQuery发起AJAX请求获取接口数据
$.ajax({
  url: '你的接口地址', // 替换成实际的接口URL
  method: 'GET', // 根据接口要求选GET/POST
  success: function(response) {
    // 假设接口返回格式是 { "cityName": "上海" }，把cityName的值绑定到id为txt_Address的文本框
    $('#txt_Address').val(response.cityName);
  },
  error: function(xhr, status, err) {
    console.log('接口请求失败:', err);
  }
});

如果是调试时已经在Network面板看到了响应数据，你只需要把对应字段的路径替换进去就行，比如响应是嵌套结构data.result.city，那就写$('#txt_Address').val(response.data.result.city)。

看了你的代码，我发现几个可能导致自动补全不显示的原因，咱们一步步来修复：

1. 先解决重复加载JS的问题 #

你在HTML里已经直接引入了Edit.js，但又在$(document).ready里用_file.loadJs再加载了一次，这会导致代码重复执行或者初始化逻辑冲突，先把重复的加载去掉：

修改后的HTML：

<!-- 重点：先确保谷歌地图Places库正确加载，替换成你的API密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places"></script>
<input type="text" id="txt_Address" />
<script src="/Communications/Edit.js"></script>
<script>
$(document).ready(function () {
  // 直接调用初始化方法，不用再重复加载JS
  _Communication.initial();
});
</script>

2. 确保谷歌Places库已加载并正确初始化 #

谷歌地点自动补全依赖Places库，之前的geoexample.js可能没正确引入这个库，所以必须在HTML里先加载带libraries=places参数的谷歌地图API（上面的代码已经加了）。然后修改Edit.js的初始化逻辑，加个判断确保库加载完成：

var _Communication = {
  initial: function () {
    // 先检查谷歌Places库是否加载完成，避免报错
    if (typeof google !== 'undefined' && google.maps && google.maps.places) {
      var input = document.getElementById('txt_Address');
      // 这里可以加配置，比如只显示城市，限制国家等
      var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ['(cities)'], // 仅显示城市类型的结果
        componentRestrictions: { country: 'cn' } // 可选：限制搜索国家，比如中国
      });

      // 可选：监听用户选中城市的事件，获取详细信息
      autocomplete.addListener('place_changed', function() {
        var selectedPlace = autocomplete.getPlace();
        console.log('用户选中的城市:', selectedPlace.name);
      });
    } else {
      console.error('谷歌地图Places库未加载，请检查API引入是否正确');
    }
  },
}

3. 排查控制台错误 #

最后记得打开浏览器的开发者工具（F12）查看Console面板，如果有API密钥错误、库未加载的报错，根据提示修复就行——比如密钥无效的话要去谷歌云平台申请并启用Places API。

这样修改后，输入框应该就能正常显示城市提示了，Network里能拿到数据说明接口请求没问题，主要是前端没有正确初始化自动补全组件导致提示没渲染出来。

内容的提问来源于stack exchange，提问作者TauFeeQ