JSFiddle - React, Tailwind, and code Playground

by paulbau

HTML

<div class="ui-widget">
  <label for="country">Your country: </label>
  <input id="country" />
  Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget">
  <label for="state">Your state: </label>
  <input id="state" />
</div>

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript

$(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#country" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          data: {
            featureCode: "PCLI",
            style: "short",
            maxRows: 12,
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
    });

    $( "#state" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          data: {
              featureCode: "ADM1", 
              q: $("#country").val(), 
            style: "short",
            maxRows: 12,
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
    });
    
    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          data: {
              featureClass: "P", 
              q: $("#state").val(), 
            style: "short",
            maxRows: 12,
            name_startsWith: request.term
          },
          success:...