javascript - 谷歌地图自动完成自动选择第一个建议并在页面加载时自动提交搜索？

Question

我在网页上使用 Google Maps API v3，当前页面加载时，搜索框会预先填充我选择的搜索词。但我需要它来实际使用该术语搜索 map 。我似乎找不到任何方法来仅使用谷歌的 API 来做到这一点，所以我想也许我可以使用以下代码模拟“输入”按键:

var e = jQuery.Event("keydown");
e.which = 13;
$("#pac-input").trigger(e);

(#pac-input是 map 上<input>标签的id)

但是这似乎不起作用。

那么如何在页面加载时强制进行搜索？

编辑:这就是我所说的搜索框

Answer 1

您首先要考虑的不是必须触发哪个事件，更重要的是知道何时触发事件。

预测将异步加载，因此您必须等待它们可用。当预测可用时，不会触发任何事件，但您可以观察主体的 DOMNodeInserted 事件(下拉列表将插入那里)并检查节点是否具有 className 'pac-item '(这是下拉列表中项目的类名)。

然后这些事件必须在输入上触发:

1. keydown 的 keyCode:40 (移至下拉列表中的第一个预测)
2. keydown 的 keyCode:13 (选择/激活预测)
3. 焦点 (激活输入)
4. keydown 的 keyCode:13 (发送请求)

示例:

  var input          =  document.getElementById('pac-input'),
      ac              = new google.maps.places.SearchBox(input),
      itemsloaded    =  google.maps.event
                          .addDomListener(document.body,
                                          'DOMNodeInserted',
                                          function(e){ 
                            if(e.target.className==='pac-item'){
                              //remove the listener
                              google.maps.event.removeListener(itemsloaded);
                              //trigger the events
                              google.maps.event.trigger( input, 'keydown', {keyCode:40})
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                              google.maps.event.trigger( input, 'focus')
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                            }
                          });

注意: 在 InternetExplorer 中，自 V9 起支持 DOMNodeInserted 事件，在旧版本和其他不支持此事件的浏览器中，您可以检查间隔是否有文档中是否存在 .pac-item。

演示:http://jsfiddle.net/doktormolle/R8XdL/