Google स्वतः पूर्ण - चयन करने के लिए दर्ज करें

Question 1

मेरे पास Google स्वतः पूर्णता एक HTML फॉर्म के पाठ क्षेत्र के लिए सेट है, और यह पूरी तरह से काम कर रहा है।

हालाँकि, जब सुझावों की सूची प्रकट होती है, और आप तीर का उपयोग स्क्रॉल करने और प्रवेश का चयन करने के लिए करते हैं, तो यह फ़ॉर्म को सबमिट कर देता है, हालाँकि अभी भी भरने के लिए बक्से हैं। यदि आप किसी सुझाव का चयन करने के लिए क्लिक करते हैं तो यह ठीक काम करता है, लेकिन एंटर सबमर्स को दबाएं। ।

मैं इसे कैसे नियंत्रित कर सकता हूं? मैं फॉर्म जमा करने से कैसे रोक सकता हूं, और इसके बजाय स्वत: पूर्ण से सुझाव का चयन हो सकता है?

धन्यवाद! {S}

Question 2

preventDefaultदर्ज किए जाने पर सबमिट किए जाने वाले फ़ॉर्म को रोकने के लिए आप इसका उपयोग कर सकते हैं , मैंने कुछ इस तरह से इस्तेमाल किया:

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

Question 3

Google ईवेंट्स का उपयोग करना उचित समाधान की तरह लगता है लेकिन यह मेरे लिए काम नहीं कर रहा है। यह jQuery समाधान मेरे लिए काम कर रहा है:

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

.pac-containerवह डिव है जो स्वत: पूर्ण मिलान रखता है। विचार यह है कि जब मैच दिखाई देते हैं, तो Enter कुंजी केवल सक्रिय मैच का चयन करेगी। लेकिन जब मैचों को छिपाया जाता है (यानी एक स्थान चुना गया है) तो वह फॉर्म जमा करेगा।

Question 4

मैंने इसे बनाने के लिए @sren और @mmalone से पहले दो उत्तरों को समामेलित किया है:

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

पेज पर पूरी तरह से काम करता है। फ़ॉर्म को सुझाव कंटेनर (.pac- कंटेनर) के दिखाई देने से रोकता है। इसलिए, जब उपयोगकर्ता प्रवेश कुंजी दबाते हैं, तो स्वतः पूर्ण ड्रॉपडाउन में से एक विकल्प चुना जाता है और उन्हें फॉर्म जमा करने के लिए इसे फिर से दबाना पड़ता है।

इस वर्कअराउंड का उपयोग करने का मेरा मुख्य कारण है क्योंकि मैंने पाया कि यदि विकल्प के रूप में जल्द ही फॉर्म भेजा जाता है, तो एंटर कुंजी के माध्यम से, अक्षांश और देशांतर मान तेजी से उनके छिपे हुए फार्म तत्वों में पारित नहीं हो रहे थे।

मूल उत्तरों का सारा श्रेय।

Question 5

यह एक मेरे लिए काम किया:

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

  }

});

ES6 से किसी भी ब्राउज़र-संगत कोड में आसानी से परिवर्तित किया जा सकता है।

Question 6

मेरे पास @ sren के जवाब में जो समस्या थी वह यह थी कि यह सबमिट इवेंट को हमेशा ब्लॉक करता है। मुझे @ mmalone का उत्तर पसंद आया लेकिन इसने बेतरतीब ढंग से व्यवहार किया, जैसे कि कभी-कभी जब मैं ENTERस्थान का चयन करने के लिए मारा , तो कंटेनर के छिपे होने के बाद हैंडलर भाग गया। तो, यहाँ है कि मैं क्या कर समाप्त हो गया

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>

स्निपेट का विस्तार करें

ध्वज यह सुनिश्चित करता है कि यदि स्थान बदला जा रहा है और उपयोगकर्ता हिट दर्ज करता है, तो घटना अवरुद्ध है। आखिरकार झंडे को falseगूगल मैप के place_changedईवेंट द्वारा सेट किया जाता है , जो तब प्रवेश कुंजी को हिट करने पर फॉर्म को सबमिट करने की अनुमति देता है।

Question 7

यहाँ एक सरल कोड है जो मेरे लिए अच्छी तरह से काम करता है (कोई जॉकरी का उपयोग नहीं करता है)।

const googleAutcompleteField = this.renderer.selectRootElement(this.elem.nativeElement);
this.selectOnEnter(googleAutcompleteField);

कोड का यह टुकड़ा, ऊपर दिए गए कोड का पालन करने के लिए, इस सवाल में मांगी गई Google कुंजी को स्वतः पूर्ण करने के लिए उपयोग किया जाता है (इस कुंजी में दर्ज की गई कार्यक्षमता के बिना या उसके बिना):

this.autocomplete = new google.maps.places.Autocomplete(googleAutcompleteField, this.googleMapsOptions);
this.autocomplete.setFields(['address_component', 'formatted_address', 'geometry']);
this.autocomplete.addListener('place_changed', () => {
  this.zone.run(() => {
    this.googleMapsData.emit([this.autocomplete.getPlace()]);
  })
})

selectOnEnter परिभाषित (कोड के पहले टुकड़े में ऊपर कहा गया है):

selectOnEnter(inputField) {
  inputField.addEventListener("keydown", (event) => {
    const selectedItem = document.getElementsByClassName('pac-item-selected');
    if (event.key == "Enter" && selectedItem.length != 0) {
      event.preventDefault();
    }
  })
}

यह कोड गूगल मैप्स को स्वत: पूर्ण फ़ील्ड चुनता है, जो भी आइटम यूजर चुनता है, वह डाउन एरो कीप के साथ आता है। एक बार जब उपयोगकर्ता Enter कुंजी के प्रेस के साथ एक विकल्प का चयन करता है, तो कुछ भी नहीं होता है। उपयोगकर्ता को onSubmit () या अन्य कमांड को ट्रिगर करने के लिए फिर से Enter दबाना होगा

Question 8

मैंने एलेक्स के कोड को ट्विक किया, क्योंकि यह ब्राउज़र में टूट गया। यह मेरे लिए एकदम सही काम करता है:

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

Question 9

मैंने उपरोक्त छोटे उत्तरों की कोशिश की है, लेकिन उन्होंने मेरे लिए काम नहीं किया, और लंबे उत्तर जो मैं उन्हें आजमाना नहीं चाहता था, इसलिए मैंने निम्नलिखित कोड बनाया है जो मेरे लिए बहुत अच्छा काम करता है। डेमो देखें

मान लीजिए कि यह आपका रूप है:

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

तब निम्नलिखित जावास्क्रिप्ट कोड समस्या को हल करेगा:

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

और यहां बताया गया है कि HTML पृष्ठ में पूरा कोड कैसा दिखता है (ध्यान दें कि आपको YOUR_API_KEYअपनी 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>

Question 10

$("#myinput").on("keydown", function(e) {
if (e.which == 13) {

if($(".pac-item").length>0)
        {
            $(".pac-item-selected").trigger("click");
}

}

$('.pac-item:first').trigger('click');यदि आप पहले परिणाम का चयन करना चाहते हैं तो उपयोग करें

Question 11

आप इसे वेनिला में कर सकते हैं:

element.addEventListener('keydown', function(e) {
    const gPlaceChoices = document.querySelector('.pac-container')
    // No choices element ? 
    if (null === gPlaceChoices) {
        return
    }
    // Get choices visivility
    let visibility = window.getComputedStyle(gPlaceChoices).display
    // In this case, enter key will do nothing
    if ('none' !== visibility && e.keyCode === 13) {
        e.preventDefault();
     }
 })