it-swarm.com.de

Google maps Places-API-V3-Autovervollständigung - Wählen Sie die erste Option bei der Eingabe aus

Ich habe die automatische Vervollständigung der Google Maps Places V3-Funktion in meinem Eingabefeld unter http://code.google.com/intl/sk-SK/apis/maps/documentation/javascript/places.html#places_autocomplete erfolgreich implementiert. Es funktioniert gut, aber ich würde gerne wissen, wie ich die erste Option aus den Vorschlägen auswählen kann, wenn ein Benutzer die Eingabetaste drückt. Ich denke, ich würde etwas JS-Magie brauchen, aber ich bin bei JS sehr neu und weiß nicht, wo ich anfangen soll.

Danke im Voraus!

59
Daniel Grezo

Ich hatte das gleiche Problem, als ich Autocomplete auf einer Site implementierte, an der ich kürzlich gearbeitet habe. Dies ist die Lösung, die ich mir ausgedacht habe:

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            var firstResult = $(".pac-container .pac-item:first").text();

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});

http://jsfiddle.net/dodger/pbbhH/

42
dodger

Hier ist eine Lösung, die keine Geocodierungsanforderung erstellt, die möglicherweise ein falsches Ergebnis zurückgibt: http://jsfiddle.net/amirnissim/2D6HW/

Es simuliert einen down-arrow-Tastendruck, wenn der Benutzer return im Autocomplete-Feld drückt. Das  Ereignis wird vor dem ausgelöst return Das Ereignis simuliert also, dass der Benutzer den ersten Vorschlag über die Tastatur auswählt.

Hier ist der Code (getestet auf Chrome und Firefox):

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
    var pac_input = document.getElementById('searchTextField');

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

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

        var autocomplete = new google.maps.places.Autocomplete(input);

    })(pac_input);
</script>
160
amirnissim

Hier ist ein Beispiel für eine echte, nicht hackige Lösung. Es werden keine Browser-Hacks usw. verwendet, sondern nur Methoden der öffentlichen API, die von Google bereitgestellt und hier dokumentiert sind: Google Maps API

Der einzige Nachteil ist, dass zusätzliche Anfragen an Google erforderlich sind, wenn der Nutzer keinen Artikel aus der Liste auswählt. Der Vorteil ist, dass das Ergebnis immer korrekt ist, da die Abfrage identisch mit der Abfrage in AutoVervollständigen ausgeführt wird. Der zweite Vorteil ist, dass wir durch die Verwendung öffentlicher API-Methoden und ohne die interne HTML-Struktur des AutoComplete-Widgets sicherzustellen, dass unser Produkt nicht beschädigt wird, wenn Google Änderungen vornimmt.

var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);  
// These are my options for the AutoComplete
autocomplete.setTypes(['(cities)']);
autocomplete.setComponentRestrictions({'country': 'es'});

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    result = autocomplete.getPlace();
    if(typeof result.address_components == 'undefined') {
        // The user pressed enter in the input 
        // without selecting a result from the list
        // Let's get the list from the Google API so that
        // we can retrieve the details about the first result
        // and use it (just as if the user had actually selected it)
        autocompleteService = new google.maps.places.AutocompleteService();
        autocompleteService.getPlacePredictions(
            {
                'input': result.name,
                'offset': result.name.length,
                // I repeat the options for my AutoComplete here to get
                // the same results from this query as I got in the 
                // AutoComplete widget
                'componentRestrictions': {'country': 'es'},
                'types': ['(cities)']
            },
            function listentoresult(list, status) {
                if(list == null || list.length == 0) {
                    // There are no suggestions available.
                    // The user saw an empty list and hit enter.
                    console.log("No results");
                } else {
                    // Here's the first result that the user saw
                    // in the list. We can use it and it'll be just
                    // as if the user actually selected it
                    // themselves. But first we need to get its details
                    // to receive the result on the same format as we
                    // do in the AutoComplete.
                    placesService = new google.maps.places.PlacesService(document.getElementById('placesAttribution'));
                    placesService.getDetails(
                        {'reference': list[0].reference},
                        function detailsresult(detailsResult, placesServiceStatus) {
                            // Here's the first result in the AutoComplete with the exact
                            // same data format as you get from the AutoComplete.
                            console.log("We selected the first item from the list automatically because the user didn't select anything");
                            console.log(detailsResult);
                        }
                    );
                }
            }
        );
    } else {
        // The user selected a result from the list, we can 
        // proceed and use it right away
        console.log("User selected an item from the list");
        console.log(result);
    }
});
20

Es scheint, dass es eine viel bessere und sauberere Lösung gibt: Um google.maps.places.SearchBox anstelle von google.maps.places.Autocomplete..__ zu verwenden, ist ein Code fast derselbe, der erste Code wird von mehreren Stellen abgerufen. Wenn Sie die Enter-Taste drücken, wird die richtige Liste zurückgegeben - also läuft sie aus der Box und es sind keine Hacks erforderlich.

Siehe die Beispiel-HTML-Seite:

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

Das relevante Code-Snippet lautet:

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

Der vollständige Quellcode des Beispiels befindet sich unter: https://Gist.github.com/klokan/8408394

13

Hier ist eine funktionierende Antwort für 2018.  

Dies kombiniert die besten Antworten auf dieser Seite, verwendet nur reines JS und ist in ES6 geschrieben. Keine jQuery, 2. API-Anfrage oder IIFE erforderlich.

Angenommen, Sie haben so etwas bereits eingerichtet, um Ihr Adressfeld zu identifizieren:

const field = document.getElementById('address-field') 
const autoComplete = new google.maps.places.Autocomplete(field)
autoComplete.setTypes(['address'])

Dann fügen Sie dies in die nächste Zeile ein:

enableEnterKey(field)

Fügen Sie an anderer Stelle in Ihrem Skript Folgendes hinzu:

  function enableEnterKey(input) {

    /* Store original event listener */
    const _addEventListener = input.addEventListener

    const addEventListenerWrapper = (type, listener) => {
      if (type === "keydown") {
        /* Store existing listener function */
        const _listener = listener
        listener = (event) => {
          /* Simulate a 'down arrow' keypress if no address has been selected */
          const suggestion_selected = document.getElementsByClassName('pac-item-selected').length > 0
          if (event.which === 13 && !suggestion_selected) {
            const e = JSON.parse(JSON.stringify(event))
            e.which = 40
            e.keyCode = 40
            _listener.apply(input, [e])
          }
          _listener.apply(input, [event])
        }
      }
      _addEventListener.apply(input, [type, listener])
    }

    input.addEventListener = addEventListenerWrapper
  }

Du solltest gut sein. Im Wesentlichen erfasst die Funktion enableEnterKey() jede Eingabe/Rückgabe-Taste im Feld input und simuliert stattdessen einen Abwärtspfeil. Es speichert auch Listener und Ereignisse und bindet sie erneut, um alle Funktionen von Google Maps Autocomplete() beizubehalten.

Offensichtlich dank früherer Antworten für den größten Teil dieses Codes, insbesondere amirnissim und Alexander Schwarzman.

12
Tony Brasunas

Für Google Places Autocomplete V3 ist die beste Lösung dafür zwei API-Anforderungen. 

Hier ist die Geige

Der Grund, warum keine der anderen Antworten ausreichte, ist, dass entweder Jquery verwendet wurde, um Ereignisse nachzuahmen (hacky), oder Geocoder oder das Google Places-Suchfeld verwendet wurden, das nicht immer den Ergebnissen der automatischen Vervollständigung entspricht. Stattdessen verwenden wir den Autocomplete-Service von Google, wie hier nur mit Javascript (keine Jquery) beschrieben.

Im Folgenden wird die am stärksten Cross-Browser-kompatible Lösung beschrieben, die native Google-APIs verwendet, um das Autocomplete-Feld zu generieren, und dann die Abfrage erneut ausführen, um die erste Option auszuwählen.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script>

Javascript

// For convenience, although if you are supporting IE8 and below
// bind() is not supported
var $ = document.querySelector.bind(document);

function autoCallback(predictions, status) {
    // *Callback from async google places call
    if (status != google.maps.places.PlacesServiceStatus.OK) {
        // show that this address is an error
        pacInput.className = 'error';
        return;
    }

    // Show a successful return
    pacInput.className = 'success';
    pacInput.value = predictions[0].description;
}


function queryAutocomplete(input) {
    // *Uses Google's autocomplete service to select an address
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions({
        input: input,
        componentRestrictions: {
            country: 'us'
        }
    }, autoCallback);
}

function handleTabbingOnInput(evt) {
    // *Handles Tab event on delivery-location input
    if (evt.target.id == "pac-input") {
        // Remove active class
        evt.target.className = '';

        // Check if a tab was pressed
        if (evt.which == 9 || evt.keyCode == 9) {
            queryAutocomplete(evt.target.value);
        }
    }
}

// ***** Initializations ***** //
// initialize pac search field //
var pacInput = $('#pac-input');
pacInput.focus();

// Initialize Autocomplete
var options = {
    componentRestrictions: {
        country: 'us'
    }
};
var autocomplete = new google.maps.places.Autocomplete(pacInput, options);
// ***** End Initializations ***** //

// ***** Event Listeners ***** //
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var result = autocomplete.getPlace();
    if (typeof result.address_components == 'undefined') {
        queryAutocomplete(result.name);
    } else {
        // returns native functionality and place object
        console.log(result.address_components);
    }
});

// Tabbing Event Listener
if (document.addEventListener) {
    document.addEventListener('keydown', handleTabbingOnInput, false);
} else if (document.attachEvent) { // IE8 and below
    document.attachEvent("onsubmit", handleTabbingOnInput);
}

// search form listener
var standardForm = $('#search-shop-form');
if (standardForm.addEventListener) {
    standardForm.addEventListener("submit", preventStandardForm, false);
} else if (standardForm.attachEvent) { // IE8 and below
    standardForm.attachEvent("onsubmit", preventStandardForm);
}
// ***** End Event Listeners ***** //

HTML

<form id="search-shop-form" class="search-form" name="searchShopForm" action="/impl_custom/index/search/" method="post">
    <label for="pac-input">Delivery Location</label>
        <input id="pac-input" type="text" placeholder="Los Angeles, Manhattan, Houston" autocomplete="off" />
        <button class="search-btn btn-success" type="submit">Search</button>
</form>

Der einzige Nachteil ist, dass die native Implementierung eine andere Datenstruktur zurückgibt, obwohl die Informationen identisch sind. Dementsprechend anpassen. 

9
AdamSchuld

Wie wäre es damit?

$("input").keypress(function(event) {
  var firstValue = null;
  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
Gangadhar Jannu

Ich möchte nur eine kleine Verbesserung für die Antwort von amirnissim schreiben.
Das Skript unterstützt IE8 nicht, da "event.which" in IE8 immer leer zu sein scheint.
Um dieses Problem zu lösen, müssen Sie lediglich nach "event.keyCode" suchen:

listener = function (event) {
  if (event.which == 13 || event.keyCode == 13) {
    var suggestion_selected = $(".pac-item.pac-selected").length > 0;
    if(!suggestion_selected){
      var simulated_downarrow = $.Event("keydown", {keyCode:40, which:40})
      orig_listener.apply(input, [simulated_downarrow]);
    }
  }
  orig_listener.apply(input, [event]);
};

JS-Geige: http://jsfiddle.net/QW59W/107/

2
Lars-Olof Kreim

Keine dieser Antworten schien für mich zu funktionieren. Sie bekämen den allgemeinen Ort, würden aber nicht wirklich zu dem Ort schwenken, nach dem ich gesucht habe. Innerhalb des .pac-Elements können Sie tatsächlich nur die Adresse (Name des ausgeschlossenen Ortes) erhalten, indem Sie $ ('. Pac-item: first'). Children () [2] .textContent auswählen

Also hier ist meine Lösung:

$("#search_field").on("keyup", function(e) {
    if(e.keyCode == 13) {
        searchPlaces();
    }
});

function searchPlaces() {
    var $firstResult = $('.pac-item:first').children();
    var placeName = $firstResult[1].textContent;
    var placeAddress = $firstResult[2].textContent;

    $("#search_field").val(placeName + ", " + placeAddress);

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({"address":placeAddress }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat(),
                lng = results[0].geometry.location.lng(),
                placeName = results[0].address_components[0].long_name,
                latlng = new google.maps.LatLng(lat, lng);

            map.panTo(latlng);
        }
    });
}

Ich weiß, dass diese Frage bereits beantwortet wurde, aber ich dachte, ich würde meine 2 Cent einbringen, nur für den Fall, dass jemand anderes das gleiche Problem wie ich hatte.

2
CodyEngel

@benregn @amirnissim Ich denke der Auswahlfehler kommt von:

var suggestion_selected = $(".pac-item.pac-selected").length > 0;

Die Klasse pac-selected sollte pac-item-selected sein. Dies erklärt, warum !suggestion_selected immer als "true" ausgewertet wird. Wenn Sie die Eingabetaste drücken, nachdem Sie die Eingabetaste gedrückt haben, wird die gewünschte Position ausgewählt.

1
Joe

Ich habe etwas Arbeit um dieses Problem gemacht, und jetzt kann ich die 1. Option von Google-Plätzen mit Hilfe von winkligen js und winkligem Autocomplete-Modul auswählen.
Danke an kuhnza
mein code

<form method="get" ng-app="StarterApp"  ng-controller="AppCtrl" action="searchresults.html" id="target" autocomplete="off">
   <br/>
    <div class="row">
    <div class="col-md-4"><input class="form-control" tabindex="1" autofocus g-places-autocomplete force-selection="true"  ng-model="user.fromPlace" placeholder="From Place" autocomplete="off"   required>
    </div>
        <div class="col-md-4"><input class="form-control" tabindex="2"  g-places-autocomplete force-selection="true"  placeholder="To Place" autocomplete="off" ng-model="user.toPlace" required>
    </div>
    <div class="col-md-4"> <input class="btn btn-primary"  type="submit" value="submit"></div></div><br /><br/>
    <input class="form-control"  style="width:40%" type="text" name="sourceAddressLat" placeholder="From Place Lat" id="fromLat">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddressLang" placeholder="From Place Long" id="fromLong">
    <input class="form-control"  style="width:40%"type="text" name="sourceAddress" placeholder="From Place City" id="fromCity">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLat" placeholder="To Place Lat" id="toLat">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddressLang" placeholder="To Place Long"id="toLong">
    <input class="form-control"  style="width:40%"type="text" name="destinationAddress"placeholder="To Place City" id="toCity">
</form>

Hier ist ein Plunker
Vielen Dank.

1
Murali

Bei all Ihren Antworten habe ich eine Lösung geschaffen, die perfekt für mich funktioniert.

/**
 * Function that add the google places functionality to the search inputs
 * @private
 */
function _addGooglePlacesInputsAndListeners() {
    var self = this;
    var input = document.getElementById('searchBox');
    var options = {
        componentRestrictions: {country: "es"}
    };

    self.addInputEventListenersToAvoidAutocompleteProblem(input);
    var searchBox = new google.maps.places.Autocomplete(input, options);
    self.addPlacesChangedListener(searchBox, self.SimulatorMapStorage.map);
}

/**
 * A problem exists with google.maps.places.Autocomplete when the user write an address and doesn't selectany options that autocomplete gives him so we have to add some events to the two inputs that we have to simulate the behavior that it should have. First, we get the keydown 13 (Enter) and if it's not a suggested option, we simulate a keydown 40 (keydownArrow) to select the first option that Autocomplete gives. Then, we dispatch the event to complete the request.
 * @param input
 * @private
 */
function _addInputEventListenersToAvoidAutocompleteProblem(input) {
    input.addEventListener('keydown', function(event) {
        if (event.keyCode === 13 && event.which === 13) {
            var suggestion_selected = $(".pac-item-selected").length > 0;
            if (!suggestion_selected) {
                var keyDownArrowEvent = new Event('keydown');
                keyDownArrowEvent.keyCode = 40;
                keyDownArrowEvent.which = keyDownArrowEvent.keyCode;

                input.dispatchEvent(keyDownArrowEvent);
            }
        }
    });
}
<input id="searchBox" class="search-input initial-input" type="text" autofocus>

Hoffe, dass es jemandem helfen kann. Bitte zögern Sie nicht, den besten Weg zu besprechen.

1
Diego Galocha

Aufbauend auf amimissims Antwort , stelle ich eine leichte Alternative dar. Ich verwende die API von Google, um die Ereignisse browserübergreifend zu behandeln (die Lösung von amimissim scheint in IE8 nicht zu funktionieren).

Ich musste auch pac-item.pac-selected in pac-item-refresh.pac-selected ändern, da sich anscheinend die Ergebnisklasse div geändert hat. Dies macht das Drücken von ENTER für eine Vorschlag-Arbeit (anstatt das nächste unten auszuwählen).

var input = document.getElementById('MyFormField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'keydown', function(event) {
    var suggestion_selected = $(".pac-item-refesh.pac-selected").length > 0;
    if (event.which == 13 && !suggestion_selected) {
        var simulated_downarrow = $.Event("keydown", {
                    keyCode: 40,
                    which: 40
        });
        this.apply(autocomplete, [simulated_downarrow]);
    }
    this.apply(autocomplete, [event]);
});
0
alt

@ Alexander s Lösung ist die, nach der ich gesucht habe. Aber es hat einen Fehler verursacht - TypeError: a.stopPropagation is not a function.

Also habe ich das Event mit KeyboardEvent gemacht. Hier ist der Arbeitscode und die Javascript-Version ist sehr praktisch für React.js-Projekte. Ich habe dies auch für mein React.js-Projekt verwendet.

(function selectFirst(input) {
  let _addEventListener = input.addEventListener
    ? input.addEventListener
    : input.attachEvent;

  function addEventListenerWrapper(type, listener) {
    if (type === 'keydown') {
      console.log('keydown');

      let orig_listener = listener;
      listener = event => {
        let suggestion_selected =
          document.getElementsByClassName('pac-item-selected').length > 0;

        if (event.keyCode === 13 && !suggestion_selected) {
          let simulated_downarrow = new KeyboardEvent('keydown', {
            bubbles: true,
            cancelable: true,
            keyCode: 40
          });

          orig_listener.apply(input, [simulated_downarrow]);
        }

        orig_listener.apply(input, [event]);
      };
    }

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

  if (input.addEventListener) input.addEventListener = addEventListenerWrapper;
  else if (input.attachEvent) input.attachEvent = addEventListenerWrapper;
})(addressInput);

this.autocomplete = new window.google.maps.places.Autocomplete(addressInput, options);

Hoffe das kann jemandem helfen, :)

0
Roman M.

Nur eine reine Javascript-Version (ohne Javascript) der großen Lösung von amirnissim:

listener = function(event) {
      var suggestion_selected = document.getElementsByClassName('.pac-item-selected').length > 0;
      if (event.which === 13 && !suggestion_selected) {
        var e = JSON.parse(JSON.stringify(event));
        e.which = 40;
        e.keyCode = 40;
        orig_listener.apply(input, [e]);
      }
      orig_listener.apply(input, [event]);
    };

Ich habe das ein bisschen untersucht, seit ich dasselbe Problem habe. Was mir an den bisherigen Lösungen nicht gefallen hat, war, dass der Autocomplete-Dienst bereits den AutocompleteService ausgelöst hat, um die Vorhersagen anzuzeigen. Daher sollten die Vorhersagen irgendwo sein und nicht erneut geladen werden.

Ich fand heraus, dass die Vorhersagen von Ort inkl. place_id ist in gespeichert

Autocomplete.gm_accessors_.place.Kc.l

und Sie werden in der Lage sein, eine Menge Daten aus den Datensätzen [0].data zu erhalten. Imho, es ist schneller und besser, die Position mithilfe der place_id anstelle der Adressdaten zu ermitteln. Diese sehr seltsame Objektauswahl scheint mir nicht besonders gut zu sein.

Wissen Sie, ob es eine bessere Möglichkeit gibt, die erste Vorhersage von der automatischen Vervollständigung abzurufen?

0
Tobias Hartmann

Arbeitslösung, die darauf wartet, wenn der Benutzer mit der Tastatur in der Liste nach unten navigiert, anstatt jedes Mal die falsche Navigation auszulösen

https://codepen.io/callam/pen/RgzxZB

Hier sind die wichtigen Teile

// search input
const searchInput = document.getElementById('js-search-input');

// Google Maps autocomplete
const autocomplete = new google.maps.places.Autocomplete(searchInput);

// Has user pressed the down key to navigate autocomplete options?
let hasDownBeenPressed = false;

// Listener outside to stop nested loop returning odd results
searchInput.addEventListener('keydown', (e) => {
    if (e.keyCode === 40) {
        hasDownBeenPressed = true;
    }
});

// GoogleMaps API custom eventlistener method
google.maps.event.addDomListener(searchInput, 'keydown', (e) => {

    // Maps API e.stopPropagation();
    e.cancelBubble = true;

    // If enter key, or tab key
    if (e.keyCode === 13 || e.keyCode === 9) {
        // If user isn't navigating using arrows and this hasn't ran yet
        if (!hasDownBeenPressed && !e.hasRanOnce) {
            google.maps.event.trigger(e.target, 'keydown', {
                keyCode: 40,
                hasRanOnce: true,
            });
        }
    }
});

 // Clear the input on focus, reset hasDownBeenPressed
searchInput.addEventListener('focus', () => {
    hasDownBeenPressed = false;
    searchInput.value = '';
});

// place_changed GoogleMaps listener when we do submit
google.maps.event.addListener(autocomplete, 'place_changed', function() {

    // Get the place info from the autocomplete Api
    const place = autocomplete.getPlace();

    //If we can find the place lets go to it
    if (typeof place.address_components !== 'undefined') {          
        // reset hasDownBeenPressed in case they don't unfocus
        hasDownBeenPressed = false;
    }

});
0
Callam