Google Maps自动完成功能会自动选择第一个建议，并在页面加载时自动提交搜索? [英] Google Maps Autocomplete auto-pick first suggestion and auto-submit search on page load?

问题描述

我正在我的网页上使用Google Maps API v3，当前在页面加载时，搜索框会预先填充我选择的搜索字词.但实际上，我需要它来使用该术语搜索地图.我似乎找不到仅使用Google API的方法，因此我想也许可以使用以下代码来模拟输入"按键:

I am using Google Maps API v3 on my webpage and currently when the page loads, the search box gets pre-populated with a search term I choose. But I need it to actually then search maps using that term. I can't seem to find any way to do this using only google's API, so I thought perhaps I could simulate an 'enter' key press using this code:

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

(#pac-input是地图上<input>标记的ID)

(#pac-input is the id of the <input> tag on the map)

但是，这似乎不起作用.

However this doesn't seem to work.

那我该如何在页面加载中强制搜索?

So how can I force a search on the page load?

这是我正在谈论的搜索框

This is the search box I'm talking about

推荐答案

您需要考虑的第一件事不是必须触发哪个事件，更重要的是要知道何时触发事件.事件.

The first thing you have to think about is not which event has to be triggered, it's more important to know when to trigger the events.

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

The predictions will be loaded asynchronously, so you must wait until they are available. There will not fire any event when the predictions are available, but you may observe the DOMNodeInserted-event of the body(the dropdown will be inserted there) and check if the nodes have the className 'pac-item' (it's the className of the items in the dropdown).

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

Then these events must be triggered on the input:

1. keydown，其keyCode:40 (以移至下拉菜单中的第一个预测)
2. keydown，其keyCode:13 (以选择/激活预测)
3. focus (以激活输入)
4. keydown，其keyCode:13 (发送请求)

1. keydown with keyCode:40 (to move to the first prediction in the dropdown)
2. keydown with keyCode:13 (to select/activate the prediction)
3. focus (to activate the input)
4. keydown with keyCode:13 (to send the request)

示例:

  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在文档中.

Note: In InternetExplorer the DOMNodeInserted-event is supported since V9, in older versions and other browsers that didn't support this event you may check in intervals if there are .pac-item present in the document.

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

这篇关于Google Maps自动完成功能会自动选择第一个建议，并在页面加载时自动提交搜索?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！