Google Places Autocomplete，模拟按钮点击的第一个结果选择

Question

我正在使用 Google Places Autocomplete 和 Google Maps api。 在我的 js 中，我包装了自动完成的侦听器，以便在没有选择自动完成结果的情况下模拟“向下箭头”和“输入”事件的组合。

参见下面的sn-p：

var pac_input = document.getElementById('locatorPlaceSearch');
        var orig_listener;

        (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") {
                    orig_listener = listener;
                    listener = function (event) {
                        var suggestion_selected = $(".pac-item-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]);
                    };
                }

                _addEventListener.apply(input, [type, listener]);
                mapsListener = listener;
            }

            input.addEventListener = addEventListenerWrapper;
            input.attachEvent = addEventListenerWrapper;



        })(pac_input);

        autocomplete = new google.maps.places.Autocomplete(pac_input,
        {
            componentRestrictions: { country: $('#hdnLocatorPlace').val() },
            types: ['geocode']
        });

现在我有一个“搜索”按钮，我还想触发一个“向下箭头”和“输入”。我试过这段代码，但它没有在监听器上触发 keydown 事件：

$('#searchAP').off('click').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();

            setTimeout(function() {
                $('#locatorPlaceSearch').focus();
                $('#locatorPlaceSearch').click();
                setTimeout(function() {
                    var sev = $.Event("keydown", {
                        keyCode: 13,
                        which: 13
                    });
                    //mapsListener.apply($('#locatorPlaceSearch'), [sev]);
                    $('#locatorPlaceSearch').trigger(sev);
                },1000);

            }, 1000);




            //$('#locatorPlaceSearch').trigger(sev);
        });

这段代码有什么问题？

Answer 1

我无法确切告诉你那里发生了什么，因为似乎根本不会触发事件（至少不会调用你的监听器）。

您可以使用原生 DOM 方法 (dispatchEvent) 触发事件：

google.maps.event.addDomListener(window, 'load', function() {

  var pac_input = document.getElementById('locatorPlaceSearch');
  var orig_listener;

  (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") {
        orig_listener = listener;
        listener = function(event) {
          var suggestion_selected = $(".pac-item-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]);
        };
      }

      _addEventListener.apply(input, [type, listener]);
      mapsListener = listener;
    }

    input.addEventListener = addEventListenerWrapper;
    input.attachEvent = addEventListenerWrapper;



  })(pac_input);

  autocomplete = new google.maps.places.Autocomplete(pac_input, {
    componentRestrictions: {
      country: $('#hdnLocatorPlace').val()
    },
    types: ['geocode']
  });


  $('#searchAP').off('click').on('click', function(e) {

    var keydown = document.createEvent('HTMLEvents');
    keydown.initEvent("keydown", true, false);
    Object.defineProperty(keydown, 'keyCode', {
      get: function() {
        return 13;
      }
    });
    Object.defineProperty(keydown, 'which', {
      get: function() {
        return 13;
      }
    });
    pac_input.dispatchEvent(keydown);
  });
});

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
<input id="locatorPlaceSearch">
<input type="submit" id="searchAP">
<input type="hidden" id="hdnLocatorPlace" value="de">

另一种解决方案，使用 maps-API 的事件包装器：

google.maps.event.addDomListener(window, 'load', function() {
  (function(input, opts, nodes) {
      var ac = new google.maps.places.Autocomplete(input, opts);
      
      google.maps.event.addDomListener(input, 'keydown', function(e) {
        if (e.keyCode === 13 && !e.triggered) {
          google.maps.event.trigger(this, 'keydown', {
            keyCode: 40
          })
          google.maps.event.trigger(this, 'keydown', {
            keyCode: 13,
            triggered: true
          })
        }
      });
      for (var n = 0; n < nodes.length; ++n) {
        google.maps.event.addDomListener(nodes[n].n, nodes[n].e, function(e) {

          google.maps.event.trigger(input, 'keydown', {
            keyCode: 13
          })
        });
      }
    }
    (
      document.getElementById('locatorPlaceSearch'), {
        componentRestrictions: {
          country: document.getElementById('hdnLocatorPlace').value
        },
        types: ['geocode']

      }, [{
        n: document.getElementById('searchAP'),
        e: 'click'
      }]
    ));
});

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
<input id="locatorPlaceSearch">
<input type="submit" id="searchAP">
<input type="hidden" id="hdnLocatorPlace" value="de">