webentwicklung-frage-antwort-db.com.de

Google Places Autocomplete - Wählen Sie das erste Ergebnis der Eingabetaste aus.

Ich verwende Google Places Autocomplete und möchte einfach, dass der oberste Eintrag in der Ergebnisliste ausgewählt wird, wenn die Eingabetaste im Formularfeld gedrückt wird und Vorschläge vorhanden sind. Ich weiß, dass das schon einmal gefragt wurde:

Google maps Places-API-V3-Autovervollständigung - erste Option bei Eingabe auswählen

Google maps Places-API-V3-Autovervollständigung - Wählen Sie die erste Option bei der Eingabe (und lassen Sie es so bleiben)

Die Antworten in diesen Fragen scheinen jedoch nicht wirklich zu funktionieren oder sie beziehen sich auf bestimmte zusätzliche Funktionen.

Es scheint auch so, als würde Folgendes funktionieren (aber es funktioniert nicht):

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

Anregungen wären sehr dankbar!

javascriptgoogle-mapsgoogle-maps-api-3google-places-apigoogle-places
28
NChase

Ich habe die vielen Antworten dieser Frage und der Antworten der verknüpften Fragen so oft gelesen, bevor ich herausfand, dass die beste Antwort dieses (Nota: leider nicht die akzeptierte Antwort ist!).

Ich habe 2 oder 3 Zeilen geändert, um daraus eine gebrauchsfertige Funktion zu erstellen, die Sie in Ihren Code kopieren/einfügen und bei Bedarf auf viele input-Elemente anwenden können. 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; }
}

Verwendungszweck:

selectFirstOnEnter(input1);
selectFirstOnEnter(input2);
...
9
Basj

Ich buche meine Antwort erneut von Google maps Places-API-V3-Autovervollständigung - erste Option bei Eingabe auswählen :

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

9
Klokan Technologies

Um diese Funktionalität zu erreichen, musste ich auf meiner Website das jQuery Simulate Plugin ( https://github.com/jquery/jquery-simulate ) installieren und dann das Ereignis anfügen:

$("input#autocomplete").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            $("input#autocomplete").trigger('focus');
            $("input#autocomplete").simulate('keydown', { keyCode: $.ui.keyCode.DOWN } ).simulate('keydown', { keyCode: $.ui.keyCode.ENTER });
        }
    });
});

Das Plugin simuliert die Aktion, indem Sie die Taste DOWN und dann ENTER drücken. ENTER funktioniert nicht und ich konnte keine andere Möglichkeit finden, die erste Option auszuwählen.

Hoffe das hilft

4
Mangiucugna

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

});
4
Callam

Das habe ich gemacht und es funktioniert:

HTML: 

<input name="location" id="autocomplete" autocomplete="off" type="text" class="textbx" placeholder="Enter Destination" required>

googleautocompletecustomized.js: 

        function initialize() {
      // Create the autocomplete object, restricting the search
      // to geographical location types.
      if($('#autocomplete').length){
          autocomplete = new google.maps.places.Autocomplete(
              (document.getElementById('autocomplete')),
              {
                types: ['(regions)'],
                componentRestrictions: {country: "in"}
              });
          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            $('#autocomplete').closest('form').data('changed', true);
            fillInAddress();
          });         
      }

    //select first result
        $('#autocomplete').keydown(function (e) {
            if (e.keyCode == 13 || e.keyCode == 9) {
                $(e.target).blur();
                if($(".pac-container .pac-item:first span:eq(3)").text() == "")
                    var firstResult = $(".pac-container .pac-item:first .pac-item-query").text();
                else
                    var firstResult = $(".pac-container .pac-item:first .pac-item-query").text() + ", " + $(".pac-container .pac-item:first span:eq(3)").text();

                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({"address":firstResult }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        placeName = results[0];
                        e.target.value = firstResult;
                        fillInAddress(placeName);
                        $('#datetimepicker1 .input-group-addon').click();
                    }
                });
            }

        });
    }

// [START region_fillform]
function fillInAddress(place) {
  // Get the place details from the autocomplete object.
  if(!place)
    var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;

    }
  }

}
2
Fronto

Wenn Sie die Angular 2,4, 5 & 6 verwenden, finden Sie die Antwort in diesem Link

Angular 6, Hauptversammlung wählt erste Adresse in Google Autocomplete aus

Angular AGM-Vorschlag zur automatischen Vervollständigung der ersten Adresse

0
saravana va

Dies ist der einfachste Weg, der für mich gelöst wurde:

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
  });
}
0
Fillype Farias