JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="group">
  <div>
    <label for="txtCity">City:</label>
    <input type="text" class="autocomplete" name="fruits" id="txtCity" /> 
  </div>
  <div>
    <label for="txtState">State:</label>
    <input type="text" name="fruits" id="txtState" />
  </div>
</div>

JavaScript

//Try search littl and wait.
// part of Data:
// [{"id":"Tachybaptus ruficollis","label":"Little Grebe","value":"Little Grebe"}, //{"id":"Ixobrychus minutus","label":"Little Bittern","value":"Little Bittern"}];

$(function(){
	
  $(".autocomplete").autocomplete({ 
      source: function( request, response ) {
        $.ajax( {
          url: "https://jqueryui.com/resources/demos/autocomplete/search.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
      	$("#txtCity").val(ui.item.state);      	
        $("#txtState").val(ui.item.city);
      }
  });

});