title: Adding a header above a autocomplete field?
body: <p>I would like to have a fixed header above the results shown for the autocomplete field which categories which part the result is from? The dropdown may not be a google data dropdown, it could be a normal autocomplete with a fixed header inserted.</p>
  
  <p>May I know, how can I do it? Anyone can help me? </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
  
  function initialize() {
  
      map = new google.maps.places.Autocomplete(
  
      (document.getElementById('add')), {
          types: ['code']
  
      });   
  }
  &lt;/script&gt;
  &lt;label&gt;Address&lt;/label&gt;
     &lt;div class="col-md-4"&gt;
     &lt;div class="input-group"&gt;
       {!! Form::hidden('pickup_lat', old('pickup_lat'), ["class" =&gt; "form-control"]) !!}
        {!! Form::hidden('lon', old('lat')!!}
       {!! Form::text('pickup_address', old('add'), "id" =&gt; "add"]) !!}
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.stack.imgur.com/Ehj4n.png" alt=""></p>
  
  <p>I had tried :</p>
  
  <p><a href="http://jsfiddle.net/ud3sh/v2Agq/4/" rel="nofollow noreferrer">http://jsfiddle.net/ud3sh/v2Agq/4/</a></p>
  
  <p>but it just shows the autocomplete result without the header</p>