如何模拟点击Google Maps Places自动补全组件的首个结果？

嗨，我之前也跟你一样卡在这里过！Google Maps的自动补全组件确实有点“傲娇”，直接调用click()经常没效果，主要是因为它的事件绑定逻辑不是常规的点击监听。给你几个亲测有效的解决方案：

方法一：模拟键盘交互（最贴近用户真实操作，推荐） #

用户正常选自动补全结果的时候，都是按向下箭头选中第一个，再按回车确认，我们直接模拟这个流程就行：

// 先让输入框获取焦点，弹出建议列表
input.focus();

// 一定要等一等！因为Google的建议是异步加载的，得给它时间渲染出来
setTimeout(() => {
  // 模拟按下向下箭头，选中第一个结果
  const downArrowEvent = new KeyboardEvent('keydown', { 
    key: 'ArrowDown', 
    bubbles: true, 
    cancelable: true 
  });
  input.dispatchEvent(downArrowEvent);

  // 模拟按下回车键，确认选择
  const enterEvent = new KeyboardEvent('keydown', { 
    key: 'Enter', 
    bubbles: true, 
    cancelable: true 
  });
  input.dispatchEvent(enterEvent);
}, 500); // 延迟时间可以根据网络情况调整，慢的话改成1000ms也没问题

方法二：直接触发pac-item的mousedown事件 #

Google的自动补全其实是监听mousedown而非click事件来触发选择的，所以直接调用click()没用，得触发它真正监听的事件：

input.focus();

setTimeout(() => {
  // 获取第一个自动补全结果元素
  const firstResult = document.querySelector('.pac-container .pac-item:first-child');
  if (firstResult) {
    // 先触发mousedown，这是核心触发事件
    const mousedownEvent = new MouseEvent('mousedown', { 
      bubbles: true, 
      cancelable: true,
      clientX: 100, // 可以加个坐标模拟真实鼠标位置，可选
      clientY: 200
    });
    firstResult.dispatchEvent(mousedownEvent);

    // 可选：补全mouseup和click事件，模拟完整的点击流程
    const mouseupEvent = new MouseEvent('mouseup', { bubbles: true, cancelable: true });
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    firstResult.dispatchEvent(mouseupEvent);
    firstResult.dispatchEvent(clickEvent);
  }
}, 500);

进阶优化：用MutationObserver替代固定延迟 #

固定延迟有时候不太靠谱（比如网络差的时候建议加载慢），可以用MutationObserver监听建议容器的变化，等第一个结果出现再操作：

input.focus();

// 创建观察者，监听pac-container的子元素变化
const observer = new MutationObserver((mutations) => {
  const firstResult = document.querySelector('.pac-container .pac-item:first-child');
  if (firstResult) {
    // 触发mousedown事件选中结果
    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
    firstResult.dispatchEvent(mousedownEvent);
    observer.disconnect(); // 完成后停止监听
  }
});

// 先等pac-container生成，再开始监听
setTimeout(() => {
  const pacContainer = document.querySelector('.pac-container');
  if (pacContainer) {
    observer.observe(pacContainer, { childList: true });
  }
}, 200);

这个方法会自动等待结果出现，比固定延迟更稳定～

备注：内容来源于stack exchange，提问作者Matt