谷歌地图自动完成总是选择第一个项

Question

我正在使用Google Maps Places V3自动完成。我希望有一个功能，当用户开始在搜索框中输入时，自动选择自动完成下拉菜单中的第一项。

类似于Facebook的搜索功能。

我已经借助这两个线程更新了Google地图自动完成： Google Autocomplete - enter to select Google maps Places API V3 autocomplete - select first option on enter 但是我找不到解决这个新问题的方法...

我在这里发布了我的代码： http://jsfiddle.net/Chazz09/YfPv3/5/

$(document).ready(function(){
  var pac_input = document.getElementById('searchfield');
  // prevents enter key to submit form//    
  $('#searchfield').keydown(function (e) {
    if (e.which == 13 && $('.pac-container:visible').length) return false;
  });   
  // prevents enter key to submit form//

  (function pacSelectFirst(input){
    // store the original event binding function
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

    function addEventListenerWrapper(type, listener) {
      // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
      // and then trigger the original listener.

      if (type == "keydown") {
        var orig_listener = listener;
        listener = function (event) {
          var suggestion_selected = $(".pac-item.pac-selected").length > 0;
          if (event.which == 13 && !suggestion_selected) {
            var simulated_downarrow = $.Event("keydown", {keyCode:40, which:40})
            orig_listener.apply(input, [simulated_downarrow]);
          }

          orig_listener.apply(input, [event]);
        };
      }

      // add the modified listener
      _addEventListener.apply(input, [type, listener]);
    }

    if (input.addEventListener)
      input.addEventListener = addEventListenerWrapper;
    else if (input.attachEvent)
      input.attachEvent = addEventListenerWrapper;

  })(pac_input);

  $(document).ready(function() 
                    {
    function initialize() {
      var options = {
        types: ['geocode'],
        componentRestrictions: {country: "fr"}
      };
      var autocomplete = new google.maps.places.Autocomplete(pac_input, options);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  });
});

- Chazz

Answer 1

这个怎么样？

$("input").keypress(function(event){
            if(event.keyCode == 13 || event.keyCode == 9) {
                $(event.target).blur();
                if($(".pac-container .pac-item:first span:eq(3)").text() == "")
                    firstValue = $(".pac-container .pac-item:first .pac-item-query").text();
                else
                    firstValue = $(".pac-container .pac-item:first .pac-item-query").text() + ", " + $(".pac-container .pac-item:first span:eq(3)").text();
                event.target.value = firstValue;

            } else
                return true;
});

- Buddybear

Answer 2

尝试这段代码...当你的列表打开时...

$('#yourAddressTextBox').val($('.pac-container').find('.pac-item').eq(0).text());

你的键盘按下函数：

$('#searchfield').keydown(function (e) {
setTimeout(function(){
    $('#searchfield').val($('.pac-container').find('.pac-item').eq(0).text());},1000);
    if (e.which == 13 && $('.pac-container:visible').length) return false;
});

- Premshankar Tiwari

---

谢谢您的建议，但我无法使其正常工作。也许是我做错了什么。您测试过您的代码吗？ - Chazz

请将您的代码与我的片段放在一起。 - Premshankar Tiwari

我尝试将您的片段放在不同的位置，因此，当列表（.pac-containter）可见时，我添加了一个函数： if (!$('.pac-container').is(':visible')) { $('#searchfield').val($('.pac-container').find('.pac- item').eq(0).text()); } 但仍然没有成功，我的代码可能是错误的。在这里发布了代码：http://jsfiddle.net/Chazz09/YfPv3/15/ - Chazz

我已经编辑了我的答案...你必须将这段代码放在keydown（或keypress）函数中... - Premshankar Tiwari

感谢您的回答。您的代码基本上回答了我的问题。唯一的问题是，现在用户被强制从下拉列表中选择第一个建议，几乎不可能更改他们的输入。此外，如果用户从搜索框中点击离开，他们的原始输入仍然存在。http://jsfiddle.net/YfPv3/19/ - Chazz

非常感谢您的帮助，您的代码确实为我提供了一个很好的起点。 - Chazz