I am trying to attach a virtual keyboard to bind to a Google places autoplete input.

If I physically type in a letter in the input, a Google-powered dropdown displays the autoplete predictions based on where the map is centered. If I click on a virtual keyboard key, the input gets updated properly, but the autoplete predictions are not updated.

I have tried to use the virtual keyboard change callback to trigger a "keyup" (stackoverflow results), "keypress", "keydown", "change" and I even tried this (demo):

change : function(e, keyboard, el) {
    google.maps.event.trigger(autoplete, 'place_changed');
}

which results in a javascript error basically showing that autoplete.getPlace(); does not return a result.

So now I've tried the code below (in this demo), which uses the change callback to trigger an autoplete prediction, but as you can see in that demo, the results differ.

change : function(e, keyboard, el) {
  var $el = $(el),
      service = new google.maps.places.AutopleteService();
  if ($el.val() !== "") {
    service.getQueryPredictions({ input: $(el).val() }, function(predictions, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      var list = '', $results = $('#results');
      for (var i = 0, prediction; prediction = predictions[i]; i++) {
        list += '<li>' + prediction.description + '</li>';
      }
      $results.html(list);
    });
  }
}

Ideally, I want to trigger the already established autoplete prediction dropdown to update while typing on the virtual keyboard.

I am trying to attach a virtual keyboard to bind to a Google places autoplete input.

If I physically type in a letter in the input, a Google-powered dropdown displays the autoplete predictions based on where the map is centered. If I click on a virtual keyboard key, the input gets updated properly, but the autoplete predictions are not updated.

I have tried to use the virtual keyboard change callback to trigger a "keyup" (stackoverflow results), "keypress", "keydown", "change" and I even tried this (demo):

change : function(e, keyboard, el) {
    google.maps.event.trigger(autoplete, 'place_changed');
}

which results in a javascript error basically showing that autoplete.getPlace(); does not return a result.

So now I've tried the code below (in this demo), which uses the change callback to trigger an autoplete prediction, but as you can see in that demo, the results differ.

change : function(e, keyboard, el) {
  var $el = $(el),
      service = new google.maps.places.AutopleteService();
  if ($el.val() !== "") {
    service.getQueryPredictions({ input: $(el).val() }, function(predictions, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      var list = '', $results = $('#results');
      for (var i = 0, prediction; prediction = predictions[i]; i++) {
        list += '<li>' + prediction.description + '</li>';
      }
      $results.html(list);
    });
  }
}

Ideally, I want to trigger the already established autoplete prediction dropdown to update while typing on the virtual keyboard.

• javascript
• google-places-api

• Does this answer your question? How to avoid need for end-user to manually start the Google Places Autoplete dropdown? – Alex R Commented Oct 11, 2020 at 22:43

1 Answer 1

I found my answer (demo)!

change : function(e, keyboard, el) {
    google.maps.event.trigger( el, 'focus', {} );
}