JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<form>
  <p>
    <label for="fruit">Fruit</label>
    <input type="text" name="fruit" id="fruit">
    <input type="hidden" name="fruit-id" id="fruit-id">
  </p>
  <p>
    <label for="fruit-color">Color</label>
    <input type="text" name="fruit-color" id="fruit-color">
  </p>
</form>

CSS

form {
  margin:30px;
}

form > p {
  margin-bottom:20px;
}

label {
  display:block;
  margin:10px 0;
}

input[type="text"] {
  padding:.5rem;
}

JavaScript

$(function() {
  var fruits = [{
    value: "orange",
    label: "Orange",
    color: "orange"
  }, {
    value: "lemon",
    label: "Lemon",
    color: "yellow"
  }, {
    value: "cherry",
    label: "Cherry",
    color: "red"
  }, {
    value: "fig",
    label: "Fig",
    color: "purple"
  }];

  $("#fruit").autocomplete({
    minLength: 0,
    source: fruits,
    focus: function(event, ui) {
      $("#fruit").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#fruit").val(ui.item.label);
      $("#fruit-id").val(ui.item.value);
      $("#fruit-color").val(ui.item.color);
      return false;
    }
  });
});