JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<input type="text" id="as"></input>

<div style="border: 1px dashed black; margin: 15px; padding: 15px;">
    
    
    <div class="suggestInput">
            asdf
        <ul class="suggestionBox"><li>A</li><li>B</li></ul>
    </div>
    <p>text text lorem ipsum..</p>
</div>
<div style="border: 1px dashed black; margin: 15px; padding: 15px;">

    
</div>

CSS

.suggestInput {
    display: inline-block;
    padding: 2px;
    background-color: lightgreen;
    min-width: 200px;
    height: 25px;
}
.suggestionBox {
    position: relative;
    top: 0px;
    background-color: red;
    z-index: 1000;
    
    z-index: 1;
top: 32px;
left: 10px;
display: block;
width: 147px;
    border: 1px solid #dddddd;
    list-style: none;
padding: 2px;
margin: 0;
display: block;
outline: none;
    position: absolute;
cursor: default;
}

JavaScript

function Suggest() {
    console.log(new Date());
    $('#as').autocomplete({
        source: ['Abc', 'Def', new Date()],
        select: function(x) {
            console.log(arguments);
        }
    });
    setTimeout(Suggest, 500);
};

Suggest();