Google Places Autocomplete wählen Sie das erste Ergebnis auf Knopfdruck

Question

Ich verwende Google Places Autocomplete und Google Maps API. Ich versuche, meine Eingabe zu machen und die Schaltfläche zu senden, um das erste Ergebnis auszuwählen, wenn ein Ergebnis nicht ausgewählt ist. Das Problem ist, wenn ich die Abwärtstaste oder die Auf-Taste verwende, um eine Stadt auszuwählen, wählt sie immer die 1. Stadt. Ich versuche immer, es so zu machen, dass, wenn die Stadt nicht existiert, es dich nicht weitermachen lässt. Es wird ein Text angezeigt, der besagt, dass keine Suchergebnisse gefunden wurden. Ich habe nach Möglichkeiten gesucht, diese Probleme zu lösen, und kann keine Lösung finden. Ich habe meinen Code unten eingefügt.

SCRIPT:

<script> 
google.maps.event.addDomListener(window, 'load', function() { 
(function(input, opts, nodes) { 
    var ac = new google.maps.places.Autocomplete(input, opts); 

    google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode === 13 && !e.triggered) { 
     google.maps.event.trigger(this, 'keydown', { 
     keyCode: 40 
     }) 
     google.maps.event.trigger(this, 'keydown', { 
     keyCode: 13, 
     triggered: true 
     }) 
    } 
    }); 
    for (var n = 0; n < nodes.length; ++n) { 
    google.maps.event.addDomListener(nodes[n].n, nodes[n].e, function(e) { 

     google.maps.event.trigger(input, 'keydown', { 
     keyCode: 13 
     }) 
    }); 
    } 
} 
(
    document.getElementById('autocomplete'), { 
    componentRestrictions: { 
     country: document.getElementById('hdnLocatorPlace').value 
    }, 
    types: ['(cities)'] 

    }, [{ 
    n: document.getElementById('searchAP'), 
    e: 'click' 
    }] 
)); 
}); 

</script> 

HTML:

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"> 
</script> 

<form> 
<input id="autocomplete"> 
<input type="submit" id="searchAP"> 
<input type="hidden" id="hdnLocatorPlace" value="de"> 

</form> 

Answer 1

Zunächst einmal eine API_KEY bekommen. Sie können es erhalten here.

Sie sollten Ihrem Autocomplete-Objekt 'ac' einen 'place_changed'-Listener hinzufügen. Sie können mehr über Place Autocomplete und 'place_changed' Ereignis in diesem link lesen. Ich habe auch bemerkt, dass, wenn Sie "Enter" drücken, das Formular übermittelt und alles weiß wird. Sie können das Formular-Tag entfernen, wenn es notwendig ist.

Hier ist ein Code Aufschlüsselung:

hinzufügen Zuhörer zu Ihrem Place Autocomplete Objekt:

ac.addListener('place_changed', function(){}); 

Im Inneren des Zuhörers, erstellen Sie eine neue Variable Ort mit ac.getPlace() Methode.

var place = ac.getPlace(); 

Fügen Sie dies auch zu Ihrer Listener-Funktion hinzu. Es prüft, ob die eingegebene Adresse verfügbar ist oder nicht.

if (!place.geometry) { 
      // User entered the name of a Place that was not suggested and 
      // pressed the Enter key, or the Place Details request failed. 
     window.alert("No details available for input: '" + place.name + "'"); 
     return; 
} 

Hier ist eine Arbeits Demo:

google.maps.event.addDomListener(window, 'load', function() { 
 
    (function(input, opts, nodes) { 
 
    var ac = new google.maps.places.Autocomplete(input, opts); 
 
    ac.addListener('place_changed', function(){ 
 
     var place = ac.getPlace(); 
 
     if (!place.geometry) { 
 
      // User entered the name of a Place that was not suggested and 
 
      // pressed the Enter key, or the Place Details request failed. 
 
     window.alert("No details available for input: '" + place.name + "'"); 
 
     return; 
 
     } 
 
    }); 
 
    
 
    } 
 
    (
 
    document.getElementById('autocomplete'), { 
 
     componentRestrictions: { 
 
     country: document.getElementById('hdnLocatorPlace').value 
 
     }, 
 
     types: ['(cities)'] 
 

 
    }, [{ 
 
     n: document.getElementById('searchAP'), 
 
     e: 'click' 
 
    }] 
 
)); 
 
});

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ"> 
 
</script> 
 
<input id="autocomplete"> 
 
<input type="submit" id="searchAP"> 
 
<input type="hidden" id="hdnLocatorPlace" value="de">

Hoffe, es hilft!