OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Google Maps Autocomplete auto-select first option

  • Thread starter Thread starter user3383301
  • Start date Start date
U

user3383301

Guest
I'm using Google Maps Places V3 autocomplete. I would like to have a functionality where if a user starts typing in a word into the search field and presses enter, the first item from the autocomplete drop down should be selected, like on http://www.onradpad.com/

I have found many threads on SO on this topic but I can't get the exact results. Help me with this issue.


Code:
<!doctype html>
<html>
  <head>
    <script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(e){
        var compformautoaddrfill = new google.maps.places.Autocomplete(document.getElementById('compAddr'), {
          componentRestrictions: {country: "be"}
        });
        google.maps.event.addListener(compformautoaddrfill, 'place_changed', function() {
          console.log(compformautoaddrfill.getPlace().address_components.length,compformautoaddrfill.getPlace());
        });
      });
    </script>
  </head>
  <body>
    <input type="text" id="compAddr">
  </body>
</html>

JSFIDDLE

<p>I'm using Google Maps Places V3 autocomplete. I would like to have a functionality where if a user starts typing in a word into the search field and presses enter, the first item from the autocomplete drop down should be selected, like on <a href="http://www.onradpad.com/" rel="nofollow noreferrer">http://www.onradpad.com/</a></p>
<p>I have found many threads on SO on this topic but I can't get the exact results. Help me with this issue.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
var compformautoaddrfill = new google.maps.places.Autocomplete(document.getElementById('compAddr'), {
componentRestrictions: {country: "be"}
});
google.maps.event.addListener(compformautoaddrfill, 'place_changed', function() {
console.log(compformautoaddrfill.getPlace().address_components.length,compformautoaddrfill.getPlace());
});
});
</script>
</head>
<body>
<input type="text" id="compAddr">
</body>
</html></code></pre>
</div>
</div>
</p>
<p><a href="http://jsfiddle.net/cvjvignesh/6BCc6/" rel="nofollow noreferrer">JSFIDDLE</a></p>
 

Latest posts

Top