Google地方信息自动填充 - 在Enter键上选择第一个结果？ [英] Google Places Autocomplete - Pick first result on Enter key?

问题描述

我使用的是Google商家信息自动填充功能，只需要在表单字段中按下Enter键并提供建议时，选择结果列表中的首选项。我知道这已经被问到：

谷歌地图Places API V3自动填充 - 选择第一个选项输入

但是这些问题的答案似乎并不实际，或者他们解决了特定的附加功能。 p>

它看起来像下面这样应该可以工作（但它不会）：

  $（input＃autocomplete）。keydown（function（e）{
 if（e.which == 13）{
 //如果有建议... 
 if（$（。pac-container .pac-item）。length）{
 //点击列表中的第一项或者模拟下来箭头键事件
 //它确实得到了这个，但我找不到实际选择项目
 $（。pac-container .pac-item：first）的方法。click（ ）; 
} else {
 //没有任何建议
} 
} 
}）; 
  

任何建议都将不胜感激！

解决方案

我从谷歌地图Places API V3自动填充 - 选择第一个选项输入：

看起来有一个更好的和干净的解决方案：要使用 google.maps.places.SearchBox 而不是 google.maps.places.Autocomplete 。
代码几乎相同，只是从多个地方获得第一个。在按Enter键时，返回正确的列表 - 所以它运行时不需要黑客。

请参阅示例HTML页面：

>

http://rawgithub.com/klokan/8408394/raw/5ab795fb36c67ad73c215269f61c7648633ae53e/places-enter-first-item.html

相关的代码片段是：

  var searchBox = new google.maps.places.SearchBox（document.getElementById（'searchinput'））; 
 
 google.maps.event.addListener（searchBox，'places_changed'，function（）{
 var place = searchBox.getPlaces（）[0]; 
 
 if（place.geometry）return; 
 
 if（place.geometry.viewport）{
 map.fitBounds（place.geometry.viewport）; 
} else {
 map.setCenter（place.geometry.location）; 
 map.setZoom（16）; 
} 
}）; 
  

示例的完整源代码位于： https://gist.github.com/klokan/8408394

I'm using a Google Places Autocomplete and I simply want it to select the top item in the results list when the enter key is pressed in the form field and suggestions exist. I know this has been asked before:

Google maps Places API V3 autocomplete - select first option on enter

Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way)

But the answers in those questions don't seem to actually work, or they address specific added functionality.

It also seems like something like the following should work (but it doesn't):

$("input#autocomplete").keydown(function(e) {
  if (e.which == 13) {          
    //if there are suggestions...
    if ($(".pac-container .pac-item").length) {
      //click on the first item in the list or simulate a down arrow key event
      //it does get this far, but I can't find a way to actually select the item
      $(".pac-container .pac-item:first").click();
    } else {
      //there are no suggestions
    }
  }
});

Any suggestions would be greatly appreciated!

解决方案

I am reposting my answer from Google maps Places API V3 autocomplete - select first option on enter:

It seems there is a much better and clean solution: To use google.maps.places.SearchBox instead of google.maps.places.Autocomplete. A code is almost the same, just getting the first from multiple places. On pressing the Enter the the correct list is returned - so it runs out of the box and there is no need for hacks.

See the example HTML page:

http://rawgithub.com/klokan/8408394/raw/5ab795fb36c67ad73c215269f61c7648633ae53e/places-enter-first-item.html

The relevant code snippet is:

var searchBox = new google.maps.places.SearchBox(document.getElementById('searchinput'));

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var place = searchBox.getPlaces()[0];

  if (!place.geometry) return;

  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(16);
  }
});

The complete source code of the example is at: https://gist.github.com/klokan/8408394

这篇关于Google地方信息自动填充 - 在Enter键上选择第一个结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！