JSFiddle - React, Tailwind, and code Playground
by Alexandru Mihai
HTML
<body>
<div class='container'>
<div class='row'>
<h2>Example</h2>
<p>User enters: "3 Dennis", a list of available options appears:</p>
<ul>
<li>3 Dennis Vale Drive, Daisy Hill, Queensland, Australia</li>
<li>etc.</li>
</ul>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Address</div>
<div class='col-xs-6'><input type='text' class='form-control address-field' id='street_number'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Suburb</div>
<div class='col-xs-6'><input type='text' class='form-control suburb-field' id='locality'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>State</div>
<div class='col-xs-6'><input type='text' class='form-control state-field' id='administrative_area_level_1'></div>
</div>
<div class='row'>
<div class='col-xs-4 text-right'>Post Code</div>
<div class='col-xs-6'><input type='text' class='form-control postcode-field' id='postal_code'></div>
</div>
<input id="route" style="display:none"/>
</div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
postal_code: 'short_name',
route:'long_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('street_number')),
{types: ['geocode']});
// When the user selects an address from the...