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

【问题标题】：Google Maps Autocomplete auto-pick first suggestion and auto-submit search on page load?谷歌地图自动完成自动选择第一个建议并在页面加载时自动提交搜索？
【发布时间】：2014-08-18 13:52:24
【问题描述】：

我在我的网页上使用 Google Maps API v3，目前当页面加载时，搜索框会预先填充我选择的搜索词。但我实际上需要它来使用该术语搜索地图。我似乎无法找到仅使用 google 的 API 的任何方法，所以我想也许我可以使用此代码模拟“输入”按键：

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

（#pac-input是地图上<input>标签的id）

但是这似乎不起作用。

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

编辑： 这是我正在谈论的搜索框

【问题讨论】：

它在form 中吗？也许$('form').submit(); 如果没有，有button 吗？也许$('#myButton').click(); 在搜索框被预填充后执行此操作。
pac-input 似乎与地点自动完成有关。对吗？
是的，它是自动完成搜索框。
这能回答你的问题吗？ Google Maps API: How do you ensure that the Google Maps Autocomplete text is an actual address before submitting?

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

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

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

那么这些事件必须在输入上触发：

keydown 与 keyCode:40 （移动到下拉菜单中的第一个预测）
keydown 与 keyCode:13 （选择/激活预测）
focus （激活输入）
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/

【讨论】：

非常感谢，很好的回答，很好的解释，完美的工作。
非常感谢！只是给任何其他读者的注释，我必须添加一个焦点事件作为 google.maps.event 列表中的第一个事件（例如，在 google.maps.event.trigger( input, 'keydown', {keyCode:40}) 之前添加 google.maps.event.trigger( input, 'focus')）

【解决方案2】：

如果您的用例允许，最简单的（并且可能是 google 想要的）方法是存储 google 的 place_id，然后使用新的 google.maps.places.PlacesService.getDetails 方法进行查询

var service = new google.maps.places.PlacesService(map);
service.getDetails({placeId: $('[name="google_places_id"]').val()}, function(place, status) { do code here });

【讨论】：