JSFiddle - React, Tailwind, and code Playground

by kevinjazzmaster

HTML

<head>


<script src="awesomplete.js"></script>
<link rel="stylesheet" href="style.css">

</head>

<div class="awesomplete"><input type="text" autocomplete="off" aria-owns="awesomplete_list_6" role="combobox"><ul role="listbox" id="awesomplete_list_6" hidden=""></ul><span class="visually-hidden" role="status" aria-live="assertive" aria-atomic="true" hidden="">No results found</span></div>

CSS

.awesomplete {
    display: inline-block;
    position: relative;
}

JavaScript

var ajax = new XMLHttpRequest();
ajax.open("GET", "https://restcountries.eu/rest/v1/lang/fr", true);
ajax.onload = function() {
	var list = JSON.parse(ajax.responseText).map(function(i) { return i.name; });
	new Awesomplete(document.querySelector("#ajax-example input"),{ list: list });
};
ajax.send();