JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="autocomplete" />
JavaScript
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
var cache = {};
$('#autocomplete').autocomplete({
source: function (request, response) {
var term = request.term;
console.log(cache);
if (term in cache) {
response(cache[term]);
return;
}
$.getJSON("/echo/json/", request, function (data, status, xhr) {
alert("Request triggered!");
cache[term] = availableTags;
response(availableTags);
});
},
minLength: 0
}).focus(function () {
console.log("fuck");
var $this = $(this);
var inputVal = $this.val();
if (inputVal !== '') {
$this.autocomplete("search");
}
});
});