Question

我正在使用Google Maps Places V3自动填充功能。我希望有一个功能，如果用户开始在搜索字段中输入，则会自动选择自动完成下拉列表中的第一个项目。

与Facebook中的搜索功能类似。

我已经在这两个主题的帮助下更新了Google地图自动填充功能：

但我无法找到解决这个新问题的方法....

我在这里发布了我的代码： 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);
  });
});

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;
});

Answer 2

尝试此代码...当您的列表打开时..

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

你的keydown功能：

$('#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;
});

Google地图自动填充功能始终选择第一项

2 个答案: