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);
      /*
      var url = "https://ac.duckduckgo.com/ac/?q=" + req.term + "&type=list&callback=?";
      console.log("URL:", url);
      // Get Json
      $.getJSON(url, function(json) {
        console.log("JSON:", json);
        var results = [];
        $.each(json, function(i, el) {
          results.push(el.phrase);
        });
        console.log("RESULTS:", results);
        resp(results);
      });
      */
      // Ajax
      var instant = "https://api.duckduckgo.com/";
      var ac = "https://duckduckgo.com/ac/";
      $.ajax({
          url: instant,
          jsonp: "callback",
          dataType: "jsonp",
          data: {
            q: req.term,
            format: "json",
            pretty: 1
          }
        })
        .done(function(response) {
          console.log("RESP:", response.Type);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
          console.log("ERROR:", textStatus, errorThrown, jqXHR);
        });
    }
  });
});