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="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form action="https://duckduckgo.com/" method="post" id="search">
  <input type="text" name="q" />
  <button type="submit" class="btn">Search</button>
</form>

JavaScript

$(function() {
  console.log("PAGE LOAD");
  $("#search input[name='q']").autocomplete({
    minLength: 1,
    position: {
      my: "left top-3"
    },
    source: function(req, resp) {
      console.log("REQUEST:", req.term);

      function jsonCallback(json) {
        console.log(json);
      }

      var x = $.ajax({
        url: "https://ac.duckduckgo.com/ac/?q=" + req.term,
        dataType: "jsonp"
      });

      x.fail(function(xhr, stat) {
        console.log("ERR:", stat, xhr);
      })

    }
  });
});