JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

CSS

.ui-autocomplete-loading {
  background: white url("https://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif") right center no-repeat;
}

JavaScript

// Example data that might be returned by ASP script
var testData = [{
  "id": "Nycticorax nycticorax",
  "label": "Black-crowned Night Heron",
  "value": "Black-crowned Night Heron"
}, {
  "id": "Ardea purpurea",
  "label": "Purple Heron",
  "value": "Purple Heron"
}, {
  "id": "Tetrao tetrix",
  "label": "Black Grouse",
  "value": "Black Grouse"
}, {
  "id": "Caprimulgus europaeus",
  "label": "European Nightjar",
  "value": "European Nightjar"
}, {
  "id": "Picus viridis",
  "label": "European Green Woodpecker",
  "value": "European Green Woodpecker"
}, {
  "id": "Saxicola rubicola",
  "label": "European Stonechat",
  "value": "European Stonechat"
}, {
  "id": "Luscinia svecica",
  "label": "Bluethroat",
  "value": "Bluethroat"
}, {
  "id": "Ardea cinerea",
  "label": "Grey Heron",
  "value": "Grey Heron"
}, {
  "id": "Corvus cornix",
  "label": "Hooded Crow",
  "value": "Hooded Crow"
}, {
  "id": "Sylvia curruca",
  "label": "Lesser Whitethroat",
  "value": "Lesser Whitethroat"
}, {
  "id": "Pluvialis apricaria",
  "label": "European Golden Plover",
  "value": "European Golden Plover"
}, {
  "id": "Sylvia communis",
  "label": "Common Whitethroat",
  "value": "Common Whitethroat"
}];

$(function() {
  function log(message) {
    $("<div>").text(message).prependTo("#log");
    $("#log").scrollTop(0);
  }

  $("#birds").autocomplete({
    source: function(request, response) {
      console.log("Search Term: ", request.term);
      // To help simulate AJAX Response, we send filtered data
      var results = $.ui.autocomplete.filter(testData, request.term);
      $.ajax({
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: {
          // Used by AJAX simulation
          json: JSON.stringify(results),
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      log("Selected: " + ui.item.value + " aka "...