JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <label for="term">Search term: </label>
  <input id="term" />
<body>
</body>
</html>

JavaScript

$("#term").autocomplete({
 
  source: function( request, response ) {
    $.ajax({
      url: 'http://query.yahooapis.com/v1/public/yql',
      dataType: 'JSONP',
      data: {
        format: 'json',
        q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + escape(request.term) + '"'
      },
      success: function(data) {
        response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
          return { label: item.suggestion.data, value: item.suggestion.data };
        }));
      }
    });
  },
    select: function(e, ui){
        $("#term").autocomplete('search', ui.item.value);
    }
});