title: How to trigger an event when google maps searchBox updated result list?
body: <p>I'm trying to find out if the height of the <code>.pac-container</code> changed (<em>see green border in figure</em>). I tried to trigger the event by a keypress of the input field.</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#pac-input').on('keypress', function() {
      var height = $('.pac-container').outerHeight();
  });
  </code></pre>
  
  <p>But the update of the result list follows a few milliseconds later so the update comes to late. Therefore I want to trigger my function when the result list changed.</p>
  
  <p><a href="https://i.stack.imgur.com/NykHT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NykHT.png" alt="searchBox classes"></a></p>
  
  <p><strong>Is there any event I can check when the result list is updated?</strong></p>
  
  <ul>
  <li><a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow noreferrer">Working example here...</a></li>
  </ul>
  
  <hr>
  
  <h3>Update</h3>
  
  <p>Meanwhile my solution is to set several <code>setTimeout()</code> events, which is not really elegant but it works with a some little delay.</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#pac-input').on('focus keypress', function() {        
          checkPacHeight();
          setTimeout(checkPacHeight, 500);
          setTimeout(checkPacHeight, 1000);
      });
  
  function checkPacHeight(){
      var count = $(".pac-container .pac-item").length;
      var height = $('.pac-container').outerHeight();
      console.log(count+' results and height is: '+height);
  }
  </code></pre>