Javascript 谷歌地图API自动完成搜索，无需从下拉列表中选择

我正在使用谷歌地图API和自动完成搜索功能。当前，您必须开始键入一个位置（城市、州、邮政编码等），然后从下拉列表中选择一个结果，将地图置于该位置的中心。但是，我想做一个傻瓜式的设置，这样如果有人只键入一个城市或一个州，在没有选择自动完成结果的情况下点击“回车”，它仍然可以工作。例如，如果有人键入“New York”并点击“enter”，而没有在下拉列表中选择结果，则它仍将以纽约为中心

我假设这是通过从Autocomplete下拉列表中获取第一个结果（如果没有手动选择）来实现的

我为表单的提交添加了一个事件侦听器，但不确定如何将第一个结果传递到“place”变量中

这是我的密码：

function searchBar(map) {
    var input = document.getElementById('search-input');
    var searchform = document.getElementById('search-form');
    var place;
    var options = {componentRestrictions: {country: 'us'}};
    var autocomplete = new google.maps.places.Autocomplete(input, options);

    //Add listener to detect autocomplete selection
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        place = autocomplete.getPlace();
        center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
        map.setCenter(center);
        map.setZoom(5);
    });

    //Add listener to search
    searchform.addEventListener('submit', function() {
        center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
        map.setCenter(center);
        map.setZoom(5);
    });

    //Reset the inpout box on click
    input.addEventListener('click', function(){
        input.value = "";
    });
};

---

这是一个实验的例子

没有实现方法访问下拉列表中的位置。基本上，你在下拉列表中看到的不是地方，只有预测。选择预测时，将加载预测的详细信息

因此，您必须以编程方式选择预测

如何实现这一目标：

单击预测之外的另一种方法是使用向下键，键代码为40。API侦听输入的键控事件

所以当你点击回车键时：

使用按键代码40触发按键向下（向下）

使用键代码13触发向下键（回车）

注意：为了避免enter的无限循环，我添加了一个自定义属性

triggered

，因此我可以在函数中绕过triggeredkeydown

---

演示：

我添加了一个过滤器，以避免在用户已从自动完成中选择任何结果时触发按键按下：

google.maps.event.addDomListener(input,'keydown',function(e){
    if(e.keyCode===13 && $('.pac-item-selected').length == 0 && !e.triggered){ 
    google.maps.event.trigger(this,'keydown',{keyCode:40}) 
    google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
  }
});

---

用于以编程方式设置初始/默认位置的辅助函数-例如，从地理位置API。

    var triggerLocation = function(autocompleteInput, addressString) {
    var $locationInput = $(autocompleteInput).val(addressString).trigger('focus');
    var maxTries = 500;

    var autocompleteSelectionInterval = setInterval(function() {
        if (!--maxTries) {
            clearInterval(autocompleteSelectionInterval);
        }

        if ($('.pac-container .pac-item').length) {
            google.maps.event.trigger($locationInput[0], 'keydown', {
                keyCode : 40
            });

            google.maps.event.trigger($locationInput[0], 'keydown', {
                keyCode : 13
            });

            clearInterval(autocompleteSelectionInterval);
        }
    }, 10);
};

示例：

var autocomplete = new google.maps.places.Autocomplete($('#location')[0]);
triggerLocation('#location', 'New York');

---

毫无疑问，这是我能在任何线程中找到的最好、最聪明的解决方案。发现这个黑客干得好！如何防止在按enter键时提交默认表单？我已经尝试在

if（e.keyCode===13&&！e.triggered）{

位中添加

return false

，但它似乎没有任何作用。在我的示例中（参见fiddle），它将通过设置表单操作（to

javascript:void（0）

）来实现

var autocomplete = new google.maps.places.Autocomplete($('#location')[0]);
triggerLocation('#location', 'New York');