Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Places Autocomplete - Pick first result on Enter key? [duplicate]

I'm using a Google Places Autocomplete and I simply want it to select the top item in the results list when the enter key is pressed in the form field and suggestions exist. I know this has been asked before:

Google maps Places API V3 autocomplete - select first option on enter

Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way)

But the answers in those questions don't seem to actually work, or they address specific added functionality.

It also seems like something like the following should work (but it doesn't):

$("input#autocomplete").keydown(function(e) {   if (e.which == 13) {               //if there are suggestions...     if ($(".pac-container .pac-item").length) {       //click on the first item in the list or simulate a down arrow key event       //it does get this far, but I can't find a way to actually select the item       $(".pac-container .pac-item:first").click();     } else {       //there are no suggestions     }   } }); 

Any suggestions would be greatly appreciated!

like image 690
NChase Avatar asked Jan 30 '13 10:01

NChase


People also ask

How does Google address autocomplete work?

Autocomplete predictions reflect real searches that have been done on Google. To determine what predictions to show, our systems look for common queries that match what someone starts to enter into the search box but also consider: The language of the query. The location a query is coming from.

Where is Googlecom Autocomplete API key?

In order to use the google place API, you need to do the following steps on https://console.developers.google.com: You need to go your project. 1: Activate Google places API depending upon your clients: iOS, Android or web. 2: Then go to the Credentials section on the left.


2 Answers

I've read the many answers of this question, and of the linked questions' answers so many times, before finding that the best answer is this one (Nota: sadly, it's not the accepted answer!).

I've modified 2 or 3 lines to turn it into a ready-to-use function that you can copy/paste in your code and apply to many input elements if needed. Here it is:

var selectFirstOnEnter = function(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-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]); // add the modified listener     }     if (input.addEventListener) {          input.addEventListener = addEventListenerWrapper;      } else if (input.attachEvent) {          input.attachEvent = addEventListenerWrapper;      } } 

Usage:

selectFirstOnEnter(input1); selectFirstOnEnter(input2); ... 
like image 192
Basj Avatar answered Sep 23 '22 08:09

Basj


I am reposting my answer from Google maps Places API V3 autocomplete - select first option on enter:

It seems there is a much better and clean solution: To use google.maps.places.SearchBox instead of google.maps.places.Autocomplete. A code is almost the same, just getting the first from multiple places. On pressing the Enter the the correct list is returned - so it runs out of the box and there is no need for hacks.

See the example HTML page:

http://rawgithub.com/klokan/8408394/raw/5ab795fb36c67ad73c215269f61c7648633ae53e/places-enter-first-item.html

The relevant code snippet is:

var searchBox = new google.maps.places.SearchBox(document.getElementById('searchinput'));  google.maps.event.addListener(searchBox, 'places_changed', function() {   var place = searchBox.getPlaces()[0];    if (!place.geometry) return;    if (place.geometry.viewport) {     map.fitBounds(place.geometry.viewport);   } else {     map.setCenter(place.geometry.location);     map.setZoom(16);   } }); 

The complete source code of the example is at: https://gist.github.com/klokan/8408394

like image 36
MapTiler Avatar answered Sep 23 '22 08:09

MapTiler