JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div class="holder" style="margin-top: 30px;">
<input id="autocomplete" type="text"/>
</div>

CSS

.holder {
    position: relative;
}
.dropdown {
    position: absolute;
    border: 1px solid red;
    display: none;
    z-index: 1;
    background: white;
}

input:focus + .dropdown {
    display: block;
}

JavaScript

var input = document.getElementById('autocomplete');
input.onfocus = function(event) {
	//this.parentNode.removeChild(document.querySelector('.dropdown'));
    var dropdown =
    '<ul>' +
        '<li>Testing</li>' +
        '<li>Css ONLY</li>' +
        '<li>Dropdown</li>' +
     '</ul>';
    var div = document.createElement('div');
    div.setAttribute('class','dropdown');
div.innerHTML = dropdown;
var elements = div.childNodes;
     this.parentNode.append(div);
}