Google Places Autocomplete - Wählen Sie das erste Ergebnis auf der Eingabetaste?

Habe ich gelesen das viele Antworten auf diese Frage, und der verlinkten Fragen' Antworten, so viele Male, bevor Sie ein finden, dass die beste Antwort ist diese eine (Nota: leider, es ist nicht die akzeptierte Antwort!).

Habe ich geändert 2 oder 3 Zeilen , um Sie in ein ready-to-use-Funktion, Sie können kopieren/einfügen in Ihren code und gelten für viele input Elemente, wenn nötig. Hier ist es:

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

Verwendung:

selectFirstOnEnter(input1);
selectFirstOnEnter(input2);
...

InformationsquelleAutor der Antwort Basj

Funktionierende Lösung, die hört auf, wenn der Benutzer begonnen hat, navigieren Sie unten in der Liste mit der Tastatur anstatt der Auslösung der falschen navigation jedes mal

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

Hier sind die wichtigen bits

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

});

InformationsquelleAutor der Antwort Callam

Dies ist der einfachste Weg, gelöst zu mir:

autocomplete.addListener('place_changed', function() {
  if(event.keyCode == 13 || event.keyCode == 9) { //detect the enter key
    var firstValue = $(".pac-container .pac-item:first").text(); //assign to this variable the first string from the autocomplete dropdown
     }
    $('#search-address').val(firstValue); //add this string to input
    console.log(firstValue); //display the string on your browser console to check what it is
   //(...) add the rest of your code here
  });
}

InformationsquelleAutor der Antwort Fillype Farias

Habe ich einige Arbeit, um dieses und jetzt kann ich erzwingen, wählen Sie 1. option von google placces mit angular js und Winkel-AutoVervollständigen-Modul.

Dank 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

Danke.

InformationsquelleAutor der Antwort Murali