ड्रॉपडाउन

Question

से चुनने के बिना Google मानचित्र API स्वत: पूर्ण खोज मैं Google मानचित्र API और स्वत: पूर्ण खोज सुविधा का उपयोग कर रहा हूं। वर्तमान में, आपको एक स्थान (शहर, राज्य, ज़िप, इत्यादि) टाइप करना शुरू करना होगा और फिर उस स्थान पर मानचित्र के लिए ड्रॉपडाउन से परिणाम का चयन करना होगा। हालांकि, मैं इस मूर्ख प्रमाण को बनाना और इसे स्थापित करना चाहता हूं ताकि अगर कोई सिर्फ एक शहर या सिर्फ एक राज्य टाइप करता है और स्वत: पूर्ण परिणाम चुनने के बिना "प्रवेश" करता है, तो यह अभी भी काम करेगा। उदाहरण के लिए, यदि कोई व्यक्ति "न्यूयॉर्क" टाइप करता है और ड्रॉपडाउन में परिणाम चुनने के बिना "एंटर" हिट करता है, तो यह अभी भी न्यूयॉर्क पर केंद्रित होगा।

मुझे लगता है कि यह स्वचालित रूप से चयनित नहीं होने पर स्वत: पूर्ण ड्रॉपडाउन से पहले परिणाम को पकड़कर पूरा किया जाता है।

मैंने फ़ॉर्म जमा करने के लिए एक ईवेंट श्रोता जोड़ा है, लेकिन यह सुनिश्चित नहीं है कि "स्थान" चर में पहला परिणाम कैसे पारित किया जाए।

function searchBar(map) { 
    var input = document.getElementById('search-input'); 
    var searchform = document.getElementById('search-form'); 
    var place; 
    var options = {componentRestrictions: {country: 'us'}}; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 

    //Add listener to detect autocomplete selection 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     place = autocomplete.getPlace(); 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Add listener to search 
    searchform.addEventListener('submit', function() { 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Reset the inpout box on click 
    input.addEventListener('click', function(){ 
     input.value = ""; 
    }); 
}; 

यहाँ और प्रयोग के लिए एक JSFiddle है:

यहाँ मेरी कोड है।

Answer 1

ड्रॉपडाउन में स्थानों तक पहुंचने के लिए कोई कार्यान्वित तरीका नहीं है। मूल रूप से जो आप ड्रॉपडाउन में देखते हैं वह स्थान नहीं हैं, केवल भविष्यवाणियां हैं। भविष्यवाणी का चयन करते समय भविष्यवाणी के विवरण लोड किए जाएंगे।

तो आपको प्रोग्रामिक रूप से भविष्यवाणी का चयन करना होगा।

यह कैसे प्राप्त करने के लिए:

एक भविष्यवाणी पर क्लिक से एक और तरीका नीचे कुंजी का उपयोग करने के लिए है, कीकोड 40. है एपीआई keydown-घटनाओं के लिए इनपुट की सुनता है।

तो आपके द्वारा enter दबाने:

1. ट्रिगर किसी कीकोड 40 (नीचे) किसी कीकोड 13 के साथ

2. ट्रिगर keydown साथ keydown (प्रवेश)

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

नोट: के लिए एक अनंत लूप से बचने के लिए दर्ज करें मैंने कस्टम प्रॉपर्टी triggered जोड़ा है, इसलिए मैं ' मैं फ़ंक्शन के अंदर ट्रिगर किए गए कीडाउन को बाईपास करने में सक्षम हूं।

डेमो: http://jsfiddle.net/4nr4tdwz/1/

Answer 2

मैं जब उपयोगकर्ता पहले से ही स्वत: पूर्ण से किसी भी परिणाम का चयन किया है ट्रिगर हो रहा keydown से बचने के लिए एक फिल्टर कहा: प्रारंभिक/डिफ़ॉल्ट स्थान प्रोग्राम के रूप में स्थापित करने के लिए

google.maps.event.addDomListener(input,'keydown',function(e){ 
    if(e.keyCode===13 && $('.pac-item-selected').length == 0 && !e.triggered){ 
    google.maps.event.trigger(this,'keydown',{keyCode:40}) 
    google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
    } 
}); 

Answer 3

हेल्पर समारोह - जैसे भौगोलिक स्थान एपीआई से।

var triggerLocation = function(autocompleteInput, addressString) { 
    var $locationInput = $(autocompleteInput).val(addressString).trigger('focus'); 
    var maxTries = 500; 

    var autocompleteSelectionInterval = setInterval(function() { 
     if (!--maxTries) { 
      clearInterval(autocompleteSelectionInterval); 
     } 

     if ($('.pac-container .pac-item').length) { 
      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 40 
      }); 

      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 13 
      }); 

      clearInterval(autocompleteSelectionInterval); 
     } 
    }, 10); 
}; 

उदाहरण:

var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); 
triggerLocation('#location', 'New York');