Location address search

Overview

Use this autocomplete address component to provide users an easy method to locate or search for an address.

Code

<div id="qg-search-widget">
  <form id="qg-search-widget-form">
    <label for="location">Suburb or postcode</label>
    <div class="qg-fl">
        <input type="text" name="location" id="location" class="qg-location-autocomplete form-control" value="" placeholder="Enter location or postcode">
        <a href="#" id="qg-app-geocoding" aria-label="Search by your location"
            title="Search by your location" class="qg-app-geocoding" style="bottom: 0.7em;">
        <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 480 480" enable-background="new 0 0 480 480">
            <path d="M240 159.909c-44.235 0-80.091 35.859-80.091 80.091s35.855 80.091 80.091 80.091c44.231 0 80.091-35.859 80.091-80.091s-35.86-80.091-80.091-80.091zm160 66.758h-25.694c-6.267-63.891-57.086-114.701-120.973-120.967v-25.7c0-7.363-5.97-13.333-13.333-13.333s-13.333 5.97-13.333 13.333v25.701c-63.889 6.266-114.705 57.075-120.971 120.966h-25.696c-7.363 0-13.333 5.97-13.333 13.333s5.97 13.333 13.333 13.333h25.696c6.266 63.891 57.082 114.7 120.971 120.966v25.701c0 7.363 5.97 13.333 13.333 13.333s13.333-5.97 13.333-13.333v-25.701c63.888-6.266 114.707-57.075 120.974-120.966h25.693c7.363 0 13.333-5.97 13.333-13.333s-5.97-13.333-13.333-13.333zm-160 121.002c-59.463 0-107.666-48.209-107.666-107.669s48.203-107.669 107.666-107.669c59.466 0 107.669 48.209 107.669 107.669s-48.203 107.669-107.669 107.669z"
                fill-rule="evenodd" clip-rule="evenodd"></path>
            </svg>
        </a>
     </div>
    <input id="latitude" name="latitude" value="" type="hidden" placeholder="Latitude">
    <input id="longitude" name="longitude" value="" type="hidden" placeholder="Longitude">
    <br>
    <button type="submit" class="btn btn-primary" id="search">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
  </form>
</div>