Google Autocomplete - entrer pour sélectionner

Question

J'ai Google Autocomplete configuré pour un champ de texte d'un formulaire HTML, et il fonctionne parfaitement.

Cependant, lorsque la liste des suggestions apparaît, et que vous utilisez les flèches pour faire défiler et sélectionner en appuyant sur la touche Entrée, le formulaire est soumis, bien qu'il y ait encore des cases à remplir. Si vous cliquez pour sélectionner une suggestion, cela fonctionne bien, mais si vous appuyez sur entrez se soumet.

Comment puis-je contrôler cela ? Comment empêcher enter de soumettre le formulaire, et d'être à la place la sélection d'une suggestion de l'autocomplétion ?

Merci ! {S}

Answer 1

Vous pouvez utiliser preventDefault pour empêcher le formulaire d'être soumis lorsque l'on appuie sur Entrée, j'ai utilisé quelque chose comme ceci :

  var input = document.getElementById('inputId');
  google.maps.event.addDomListener(input, 'keydown', function(event) { 
    if (event.keyCode === 13) { 
        event.preventDefault(); 
    }
  });

Answer 2

L'utilisation de la gestion des événements de Google semble être la bonne solution, mais cela ne fonctionne pas pour moi. Cette solution jQuery fonctionne pour moi :

$('#inputId').keydown(function (e) {
  if (e.which == 13 && $('.pac-container:visible').length) return false;
});

.pac-container est la division qui contient les correspondances de l'autocomplétion. L'idée est que lorsque les correspondances sont visibles, la touche Entrée choisira simplement la correspondance active. Mais lorsque les correspondances sont cachées (c'est-à-dire lorsqu'un emplacement a été choisi), elle soumet le formulaire.

Answer 3

J'ai amalgamé les deux premières réponses de @sren et @mmalone pour produire ceci :

var input= document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode == 13 && $('.pac-container:visible').length) { 
        e.preventDefault(); 
    }
}); 

fonctionne parfaitement sur la page. empêche le formulaire d'être soumis lorsque le conteneur de suggestions (.pac-container) est visible. Ainsi, une option de la liste déroulante de la saisie automatique est sélectionnée lorsque l'utilisateur appuie sur la touche "Entrée", et il doit appuyer à nouveau sur cette touche pour soumettre le formulaire.

La raison principale pour laquelle j'ai utilisé cette solution de contournement est que j'ai constaté que si le formulaire est envoyé dès qu'une option est sélectionnée, via la touche Entrée, les valeurs de latitude et de longitude ne sont pas transmises assez rapidement dans leurs éléments de formulaire cachés.

Tout le mérite revient aux réponses originales.

Answer 4

Celui-là a marché pour moi :

google.maps.event.addDomListener(input, 'keydown', e => {

  // If it's Enter
  if (e.keyCode === 13) {

    // Select all Google's dropdown DOM nodes (can be multiple)
    const googleDOMNodes = document.getElementsByClassName('pac-container');

    // Check if any of them are visible (using ES6 here for conciseness)
    const googleDOMNodeIsVisible = (
      Array.from(googleDOMNodes).some(node => node.offsetParent !== null)
    );

    // If one is visible - preventDefault
    if (googleDOMNodeIsVisible) e.preventDefault();

  }

});

Peut être facilement converti de ES6 à tout code compatible avec les navigateurs.

Answer 5

Le problème que j'ai rencontré avec la réponse de @sren est qu'elle bloque toujours l'événement submit. J'aimais bien la réponse de @mmalone, mais elle se comportait de manière aléatoire, comme par exemple lorsque j'appuyais sur la touche ENTER pour sélectionner l'emplacement, le gestionnaire s'exécute après que le conteneur soit caché. Voici donc ce que j'ai fini par faire

var location_being_changed,
    input = document.getElementById("js-my-input"),
    autocomplete = new google.maps.places.Autocomplete(input),
    onPlaceChange = function () {
        location_being_changed = false;
    };

google.maps.event.addListener( this.autocomplete,
                               'place_changed',
                               onPlaceChange );

google.maps.event.addDomListener(input, 'keydown', function (e) {
    if (e.keyCode === 13) {
        if (location_being_changed) {
            e.preventDefault();
            e.stopPropagation();
        }
    } else {
        // means the user is probably typing
        location_being_changed = true;
    }
});

// Form Submit Handler
$('.js-my-form').on('submit', function (e) {
    e.preventDefault();
    $('.js-display').text("Yay form got submitted");
});

<p class="js-display"></p>
<form class="js-my-form">
    <input type="text" id="js-my-input" />
    <button type="submit">Submit</button>
</form>

<!-- External Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

Le drapeau garantit que si l'emplacement est modifié et que l'utilisateur appuie sur la touche Entrée, l'événement est bloqué. Finalement, l'indicateur est mis à false par les cartes de google place_changed qui permet ensuite de soumettre le formulaire en appuyant sur la touche Entrée.