JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css">
<script src="https://raw.github.com/scottgonzalez/jquery-ui-extensions/master/autocomplete/jquery.ui.autocomplete.autoSelect.js"></script>
<script src="https://raw.github.com/scottgonzalez/jquery-ui-extensions/master/autocomplete/jquery.ui.autocomplete.selectFirst.js"></script>
<label for="city">Select a City</label>
<input id="city">
<hr />
<p>After Selecting City the State and Country field is automatically populated...<br /><br /></p>
<label for="state">State:</label>
<input id="state">
<label for="country">Country:</label>
<input id="country"><hr />

JavaScript

$(function() {
        function log( str ) {
            $('<p></p>')
                .html( str )
                .appendTo( 'body' );
        }

        $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name,
                                city: item.name,
                                country: item.countryName,
                                state: (item.adminName1 ? "" + item.adminName1 : "")
                            }
                        }));
                    }
                });
            },
            
            selectFirst: true,
            select: function( event, ui ) {
                log( "City: " + ui.item.city + "<br />" + "State: " + ui.item.state + "<br />" + "Country: " + ui.item.country );
                       $('#state').val(ui.item.state); 
                $('#country').val(ui.item.country);
            },

        });
    });