JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<div id="inp">
    <input type="text" id="search" value="" /> <span id="ending" style="color: gray" ></span>
</div>

CSS

#inp {
    padding:2px;
    border:1px solid black;
}
input {
    padding:0px;
    border:0px;
    width:200px;    
}

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" ];
    
    $( "#search" ).autocomplete({
        source: availableTags,
        open: function(event, ui) {
            var firstInList = $(".ui-autocomplete").children('li').children('a').html();
            $('#ending').html(firstInList.substring(this.value.length))
        }
    });
            
    $('input#search').keypress(function(e){
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) { 
            e.preventDefault(); 
            $(this).val($(".ui-autocomplete").children('li').children('a').html());
            $(".ui-autocomplete").hide();
            $('#ending').empty();
        }
        this.style.width = ((this.value.length + 1) * 6) + 4 + 'px';
    });

});