autocomplete - remove - Autocompletar de Google: ingrese para seleccionar

remove autocomplete input chrome

Question

Tengo Google Autocomplete configurado para un campo de texto de un formulario HTML, y está funcionando perfectamente.

Sin embargo, cuando aparece la lista de sugerencias, y usa las flechas para desplazarse y seleccionar usando enter, envía el formulario, aunque todavía hay recuadros para completar. Si hace clic para seleccionar una sugerencia, funciona bien, pero al presionar enter submits .

¿Cómo puedo controlar esto? ¿Cómo puedo dejar de enviar el formulario y, en su lugar, ser la selección de una sugerencia de autocompletar?

¡Gracias! {S}

Answer 1

Ajusté el código de Alex, porque se rompió en el navegador. Esto funciona perfecto para mí:

google.maps.event.addDomListener(
    document.getElementById(''YOUR_ELEMENT_ID''),
    ''keydown'',
    function(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'');
            //If multiple nodes, prevent form submit.
            if (googleDOMNodes.length > 0){
                e.preventDefault();
            }
            //Remove Google''s drop down elements, so that future form submit requests work.
            removeElementsByClass(''pac-container'');
          }
    }
);

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

Answer 2

Amalgamé las primeras dos respuestas de @sren y @mmalone para producir esto:

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

funciona perfectamente en la página. impide que se envíe el formulario cuando el contenedor de sugerencias (contenedor .pac) está visible. Así que ahora, se selecciona una opción del menú desplegable de autocompletar cuando los usuarios presionan la tecla Intro, y tienen que presionarlo nuevamente para enviar el formulario.

Mi razón principal para usar esta solución temporal es porque descubrí que si el formulario se envía tan pronto como se selecciona una opción, mediante la tecla Intro, los valores de latitud y longitud no se transmiten con la suficiente rapidez a sus elementos ocultos.

Todo el crédito a las respuestas originales.

Answer 3

El problema que tuve con la respuesta de @ sren fue que bloquea el evento submit siempre. Me gustó la respuesta de @mmalone, pero se comportó de forma aleatoria, como a veces, cuando pulso ENTER para seleccionar la ubicación, el controlador se ejecuta después de que el contenedor está oculto. Entonces, esto es lo que terminé haciendo

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>

La bandera garantiza que si la ubicación se está modificando y el usuario toca ingresar, el evento está bloqueado. Finalmente, la bandera se configura como false mediante el evento place_changed google map, que luego permite enviar el formulario al presionar la tecla Intro.

Answer 4

Este trabajó para mí:

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

  }

});

Se puede convertir fácilmente de ES6 a cualquier código compatible con el navegador.

Answer 5

Probé las respuestas cortas anteriores pero no me funcionaron, y las respuestas largas no las quería probar, así que creé el siguiente código que me funcionó bastante bien. Ver demostración

Supongamos que esta es su forma:

<form action="" method="">
      <input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
      <input type="text" name="field-1" placeholder="Field 1"><br><br>
      <input type="text" name="field-2" placeholder="Field 2"><br><br>
      <button type="submit">Submit</button>
</form>

Entonces, el siguiente código de javascript resolverá el problema:

var placesSearchbox = $("#google-places-searchbox");

placesSearchbox.on("focus blur", function() {
    $(this).closest("form").toggleClass(''prevent_submit'');
});

placesSearchbox.closest("form").on("submit", function(e) {
    if (placesSearchbox.closest("form").hasClass(''prevent_submit'')) {
        e.preventDefault();
        return false;
    }
});

Y así es como se ve el código completo en la página HTML (Tenga en cuenta que debe reemplazar YOUR_API_KEY con su clave de API de Google):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Prevent form submission when choosing a place from google places autocomplete searchbox</title>
</head>
<body>
  <form action="" method="">
      <input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
      <input type="text" name="field-1" placeholder="Field 1"><br><br>
      <input type="text" name="field-2" placeholder="Field 2"><br><br>
      <button type="submit">Submit</button>
  </form>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <!-- Google Maps -->
  <!-- Note that you need to replace the next YOUR_API_KEY with your api key -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
     async defer></script>
  <script>
    var input = document.getElementById("google-places-searchbox");
    var searchBox = new google.maps.places.SearchBox(input);

    var placesSearchbox = $("#google-places-searchbox");

    placesSearchbox.on("focus blur", function() {
        $(this).closest("form").toggleClass(''prevent_submit'');
    });

    placesSearchbox.closest("form").on("submit", function(e) {
        if (placesSearchbox.closest("form").hasClass(''prevent_submit'')) {
            e.preventDefault();
            return false;
        }
    });
  </script>
</body>
</html>

Answer 6

Usar el manejo de eventos de Google parece ser la solución adecuada, pero no funciona para mí. Esta solución jQuery me funciona:

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

.pac-container es el div que contiene las coincidencias de Autocompletar. La idea es que cuando las coincidencias sean visibles, la tecla Intro simplemente elija la coincidencia activa. Pero cuando los partidos están ocultos (es decir, se ha elegido un lugar), se enviará el formulario.

Answer 7

Puede usar preventDefault para detener el formulario que se envía cuando se pulsa enter, utilicé algo como esto:

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