JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<form role="form">
<div class="form-group form-group-inline ui-widget">
	    <label>CountryCode: </label>
	    <input required id="countryCodes" class="form-control" type="text" name="countryCodes"/>
</div>
</form>
</body>

JavaScript

var countries = {
      "Argentina (AR)":"AR",
      "United States (US)":"US",
      "Comoros": "KM",
"Congo (Brazzaville)": "CG",
"Congo, Democratic Republic of the": "CD",
"Cook Islands":  "CK",
"Costa Rica":  "CR",
"CĂ´te d'Ivoire": "CI",
"Croatia": "HR",
"Cuba":  "CU",
"Cyprus":  "CY",
"Czech Republic":  "CZ",
"Denmark": "DK",
"Djibouti":  "DJ",
"Dominica":  "DM",
"Dominican Republic":  "DO",
    };

$( "#countryCodes" )
      // don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            Object.keys(countries), extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( countries[ui.item.value] );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( "," );
          return false;
        }
      });