title: Google Places Autocomplete Dropdown - how to add custom row in dropdown for no suggestions?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  function initialize() {
      var options = {types: ['(cities)'], componentRestrictions: {country: "us"}};
      var input = document.getElementById('searching');
      var autocomplete = new google.maps.places.Autocomplete(input, options);
  
      google.maps.event.addListener(autocomplete, "place_changed", function() {
          document.getElementById('searching').value = "";
          $('#stat-boxes').hide();
          var place = autocomplete.getPlace().formatted_address;
          var getcityinfo = $.get('/cities', place).done(function(res){
              res = JSON.parse(res);
              var number_sites = (res[0]["count"]);
              var Min_height = (res[0]["min_height"]);
              var Max_height = (res[0]["max_height"]);
              if( number_sites &gt; 0 ){
                  $('#num-locations').text(number_sites);
                  $('#location-text').text(place);
                  if( Min_height &amp;&amp; Max_height ){
                      $('#min-max-heights').text(Min_height+"' - "+Max_height+"'");
                  } else {
                      $('#min-max-heights').text('Not available');
                  }
                  $('#stat-boxes').fadeIn();
              } else {
                  alert('No results');
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="carousel-wrapper"&gt;
          &lt;div class="carousel carousel-slider pic-carousel" style="height: 830px;"&gt;
              &lt;div class="over-pic carousel-fixed-item center" style="z-index: 1"&gt;
                  &lt;div class="carousel-control-prev" id="btnPrev"&gt; &lt;/div&gt;
                  &lt;div class="carousel-control-next" id="btnNext"&gt; &lt;/div&gt;
                  &lt;input type="text" id="searching"&gt;
                  &lt;div class="choice-words"&gt;
                      &lt;div class="headline"&gt;Hello, Welcome to SmallCellSite.com&lt;/div&gt;
                      &lt;div class="headline-sub"&gt;The largest marketplace for wireless broadband attachments in the US.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item white-text" href="#two!"&gt;
                  &lt;img src="/img/welcome/scs-home-02.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item white-text" href="#three!"&gt;
                  &lt;img src="/img/welcome/scs-home-03.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item white-text" href="#four!"&gt;
                  &lt;img src="/img/welcome/scs-home-04.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item white-text" href="#one!"&gt;
                  &lt;img src="/img/welcome/scs-home-01.jpg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="stat-boxes" class="stat-boxes-wrapper"&gt;
              &lt;div class="stat-box"&gt;
                  &lt;div class="stat-box-header"&gt;&lt;h4&gt;Locations&lt;/h4&gt;&lt;/div&gt;
                  &lt;span class="num-locations" id="num-locations"&gt;xxx&lt;/span&gt;
                  &lt;span class="location-text"&gt;Assets located in and around&lt;/span&gt;
                  &lt;span class="location-text" id="location-text"&gt;Houston, TX&lt;/span&gt;
                  &lt;a href="#" class="stat-boxes-link"&gt;Municipality Features&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="stat-box stat-box-middle"&gt;
                  &lt;div class="stat-box-header"&gt;&lt;h4&gt;Details&lt;/h4&gt;&lt;/div&gt;
                  &lt;span class="num-locations" id="min-max-heights"&gt;15'-65'&lt;/span&gt;
                  &lt;span class="location-text"&gt;Heights of assets in your search results&lt;/span&gt;
                  &lt;a href="#" class="stat-boxes-link"&gt;Power + Fiber availability&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="stat-box"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have created a google places autocomplete search box where a user can only search for cities in USA. Everything works fine but now I want to create a new functionality as per following.</p>
  
  <p>Suppose a user types gibberish in the search bar like "ejnfwniefewfneinenfwenefjnew", currently search box stops showing any places for this since no match could be made. But when this happens, I want my dropdown to display only one row displaying message - "No matches found". how can I do that. I read through lot of questions but seems no one has asked for such a feature to be added.</p>
  
  <p>Can someone please explain how to do this and recreate this in code using Javascript and HTMl ?</p>