JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
  <ol>
    <li>Type 'Value' in the text box</li>
    <li>Press 'arrow down' to select the first element</li>
    <li>Press enter</li>
    <li>Keep pressed backspace to delete completely the selected item</li>
    <li>Press TAB</li>
    <li>Value in 'readonly' field is still there</li>
  </ol>
</p>

<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">

<button>Button added just to have an element to focus on</button>

JavaScript

var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];

$("#txtAutocomplete").autocomplete({
  source: mySource,
  select: function(event, ui){
    if(ui.item){
      console.log('select', ui.item.label);
      $("#hiddenField").val(ui.item.id);
      return ui.item.label;
    }
    else{
      console.log('select with null value');
      $("#hiddenField").val('');
    }
  },
  change: function(event, ui){
    if(ui.item){
      console.log('change', ui.item.id);
      $("#hiddenField").val(ui.item.id);
    }
    else{
      console.log('change with null value');
      $("#hiddenField").val('');
    }
  }
});