Google Autouzupełnianie - wpisz, aby wybrać

Question

Mam Google Autouzupełnianie skonfigurowane dla pola tekstowego formularza HTML i działa idealnie.

Jednak po wyświetleniu listy sugestii i użyciu strzałek do przewijania i wybierania za pomocą klawisza Enter, formularz jest przesyłany, ale nadal są pola do wypełnienia. Jeśli klikniesz, aby wybrać sugestię, działa poprawnie, ale naciśnięcie wprowadza.

Jak mogę to kontrolować? Jak mogę przerwać wprowadzanie formularza, a zamiast tego wybrać sugestię z autouzupełniania?

Dzięki! {S}

Answer 1

Można użyć preventDefault zatrzymać formularz składany gdy ENTER hit, kiedyś coś takiego:

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

Answer 2

Korzystanie wydarzenia Google obsługa wydaje się właściwym rozwiązaniem, ale to nie działa dla mnie. To rozwiązanie jQuery działa dla mnie:

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

.pac-container jest div, który trzyma autouzupełnianie mecze. Chodzi o to, że kiedy mecze są widoczne, klawisz Enter po prostu wybierze aktywne dopasowanie. Ale gdy mecze są ukryte (tzn. Wybrano miejsce), formularz zostanie przesłany.

Answer 3

Problem, który miałem z odpowiedzią @ sren, polegał na tym, że blokuje ona zawsze zdarzenie submit. Podobała mi się odpowiedź @ mmalone, ale zachowywała się losowo, ponieważ czasami kiedy uderzyłem w ENTER, aby wybrać lokalizację, procedura obsługi przebiegła po ukryciu kontenera. Tak więc, oto co skończyło się robi

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>

Flaga zapewnia, że ​​jeśli lokalizacja jest zmieniana & użytkownik kliknie enter, zdarzenie jest zablokowana. Ostatecznie flaga jest ustawiona na false przez zdarzenie google place_changed, które następnie pozwala na przesłanie formularza po naciśnięciu klawisza Enter.

Answer 4

mam połączone dwie pierwsze odpowiedzi od @sren i @mmalone do produkcji to:

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

działa idealnie na stronie. zapobiega przesyłaniu formularza, gdy widoczny jest kontener sugestii (.pac-container). Teraz opcja z rozwijanego autouzupełniania jest wybierana, gdy użytkownicy naciśnie klawisz Enter, i muszą nacisnąć go ponownie, aby przesłać formularz.

Głównym powodem zastosowania tego obejścia jest fakt, że jeśli formularz został wysłany po wybraniu opcji, za pomocą klawisza Enter wartości szerokości i długości geograficznej nie zostały wystarczająco szybko przekazane do ich ukrytych elementów formularza .

Wszystkie zasługują na oryginalne odpowiedzi.

Answer 5

Ten pracował dla mnie:

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

    } 

}); 

Może być łatwo przekształcony z ES6 do dowolnego kodu przeglądarki kompatybilne.

Answer 6

Poprawiłem kod Alexa, ponieważ zepsuł się w przeglądarce. Działa to dla mnie idealny:

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 7

Próbowałem powyższe krótkie odpowiedzi, ale nie dla mnie, a długie odpowiedzi Nie chciałam je wypróbować, więc stworzyłem następujące kod, który działał całkiem dobrze dla mnie. See Demo

Załóżmy jest to Twoja 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> 

Wtedy następujący kod javascript rozwiąże problem:

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

A oto jak pełny kod wygląda na stronie HTML (Uwaga musisz zastąpić YOUR_API_KEY swoim kluczem Google api):

<!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>