JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

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

CSS

/*
.ui-autocomplete-loading {
  background: url('https://dmg98m9mr6pi1.cloudfront.net/RoR/images/wait_arrows.gif') no-repeat right center;
}
*/

.my-autocomplete-loading {
  width: 175px;
  background: white url('https://dmg98m9mr6pi1.cloudfront.net/RoR/images/wait_arrows.gif') no-repeat left center;
  padding-left: 25px;
}

JavaScript

$(document).ready(function() {
  $("#cities").autocomplete({
    source: function(request, response) {
      $.ajax({
          method: 'GET',
          dataType: 'jsonp',
          jsonpCallback: 'jsonCallback',
          url: "https://suggestqueries.google.com/complete/search?client=chrome&q=" + request.term
        })
        .done(function(data) {
          console.log(data);
          response(data[1]);
        });
    },
    search: function(e, ui) {
      $("<span>", {
          class: "my-autocomplete-loading"
        })
        .html("Loading...")
        .insertAfter("#cities")
        .position({
          my: "left top",
          at: "left bottom",
          of: "#cities"
        });
    },
    open: function(e, ui) {
      $(".my-autocomplete-loading").remove();
    },
    minLength: 1,
    autoFocus: true,
    crossDomain: true
  });
});