【问题标题】:Google Maps autocomplete always select first item [duplicate]谷歌地图自动完成总是选择第一项[重复]
【发布时间】:2013-07-14 19:11:53
【问题描述】:

我正在使用 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);
  });
});

【问题讨论】:

    标签: javascript jquery google-maps google-maps-api-3 google-maps-autocomplete


    【解决方案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;
    });
    

    【讨论】:

      【解决方案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;
      });
      

      【讨论】:

      • 感谢您的建议,但我无法使其正常工作。也许我做错了什么。你测试过你的代码吗?
      • 请把你的代码放在我的sn-p上
      • 我试着把你的 sn-p 放在不同的地方,所以没有我在列表 (.pac-container) 可见时添加了一个函数:if (!$('.pac-container'). is(':visible')) { $('#searchfield').val($('.pac-container').find('.pac-item').eq(0).text());但仍然没有成功,我的代码可能不正确。在此处发布代码:jsfiddle.net/Chazz09/YfPv3/15
      • 我已经编辑了我的答案...您必须将此代码放入 keydown(或 keypress)功能...
      • 但是非常感谢您的帮助,您的代码确实给了我一个很好的起点
      猜你喜欢
      • 2021-04-23
      • 2011-12-23
      • 2019-01-16
      • 2013-03-20
      • 1970-01-01
      • 2016-11-17
      • 2018-01-26
      • 1970-01-01
      相关资源
      最近更新 更多