title: Google Maps - Autocomplete & Directions API - trigger onchange() for dropdown list?
body: <p>I have Google Map and two inputs. Both of them use autocomplete, like this:</p>
  
  <pre><code>//first input autocomplete
  
  var input1 = (document.getElementById('start'));
  var autocomplete1 = new google.maps.places.Autocomplete(input1);
  
  autocomplete1.bindTo('bounds', map);
  
  //second input autocomplete
  
  var input2 = (document.getElementById('end'));
  var autocomplete2 = new google.maps.places.Autocomplete(input2);
  
  autocomplete2.bindTo('bounds', map);
  </code></pre>
  
  <p>After I fill both of these inputs I'm displaying the shortest way betweeen them using Directions API:</p>
  
  <pre><code>function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
      }
    });
  }
  </code></pre>
  
  <p>My inputs look like this:</p>
  
  <pre><code>&lt;input type="text" id="start" onchange="calcRoute();" /&gt;
  &lt;input type="text" id="end" onchange="calcRoute();" /&gt; 
  </code></pre>
  
  <p><strong>The Problem</strong>:</p>
  
  <p>Everything works perfectly fine if I type full addresses in these inputs for example:</p>
  
  <p>Berlin, Germany &amp; Hamburg, Germany (I guess that's because every letter typed triggers onchange()).</p>
  
  <p>But when I type:</p>
  
  <p>Berlin, Germany and then
  Hamb > click on Hamburg from Google Autocomplete Dropdown List</p>
  
  <p>It doesn't show Hamburg, it shows a town called Hamb.</p>
  
  <p>Is there any way to fix it?</p>
  
  <p><img src="https://i.stack.imgur.com/JKiz7.png" alt="screen"></p>