JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

  </head>

  <body>

    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>


  </body>

</html>

JavaScript

var req = [{
    "label": "item 1",
    "value": "item 1",
    "id": 1
  },
  {
    "label": "item 2",
    "value": "item 2",
    "id": 2
  },
  {
    "label": "item 3",
    "value": "item 1",
    "id": 3
  }
];

$('#tags').autocomplete({
  source: req,
  change: function(event, ui) {
    alert(ui.item.id);
  }
});