如何在首次使用后触发Google Places Autocomplete结果下拉框？

我帮你搞定这个困扰！问题出在当输入框已经有完整的地址内容时，Google Places Autocomplete默认不会在获得焦点时自动重新触发下拉列表——它默认认为这个内容已经是一个确认的地点了。要实现点击就弹出下拉，关键是要主动调用Autocomplete实例的open()方法。

正确的实现步骤： #

1. 保存Autocomplete实例：首先在初始化的时候，一定要把创建的Autocomplete实例保存下来，这样后续才能调用它的方法。
2. 绑定focus事件触发下拉：给输入框绑定focus事件，在事件回调里调用实例的open()方法，强制弹出补全下拉框。

完整代码示例：

// 全局保存Autocomplete实例（或者在initAutocomplete内处理，确保作用域可访问）
let autocomplete;

function initAutocomplete() {
  // 获取输入框元素
  const inputEl = document.querySelector('.geoloc input');
  
  // 初始化Autocomplete
  autocomplete = new google.maps.places.Autocomplete(inputEl, {
    // 这里可以添加你的配置项，比如限制地址类型：types: ['address']
  });

  // 处理地点选中事件（原有逻辑保留）
  autocomplete.addListener('place_changed', function() {
    const selectedPlace = autocomplete.getPlace();
    // 这里可以添加选中地点后的处理逻辑，比如获取经纬度等
  });

  // 绑定focus事件，点击输入框时强制弹出下拉
  inputEl.addEventListener('focus', function() {
    // 关键：调用Autocomplete的open方法
    autocomplete.open();
  });

  // 保留你原来的回车选中逻辑
  inputEl.addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
      e.preventDefault(); // 阻止默认的表单提交行为
      google.maps.event.trigger(this, 'keydown', {keyCode:40});
      google.maps.event.trigger(this, 'keydown', {keyCode:13});
      this.blur();
    }
  });
}

为什么你之前的方法没用？ #

你尝试的google.maps.event.trigger(this, 'place_changed')或者focus事件，只是触发了输入框的原生事件，但并没有调用Autocomplete组件本身的下拉触发逻辑。只有直接调用组件实例的open()方法，才能强制它基于当前输入框的内容重新发起搜索并显示下拉列表。

这样修改后，不管输入框里有没有内容，只要点击获取焦点，就会自动弹出对应的地址补全下拉框，完全不需要用户先删除字符~

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