JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
    <input id="tags" class="ui-autocomplete-input" autocomplete="off">
</div>

CSS

#tags{
    width:150px;
}

JavaScript

$(function() {
		var availableTags = [
			"ActionScript",
			"Erlang",
			"Fortran version one",
            "Fortran version two",
			"Groovy",
			"Haskell",
			"JavaScript",
		];
        $.widget('custom.testcomplete', $.ui.autocomplete,{
            _renderItem: function( ul, item ) {
            
            var limit = 12
            if(item.label.length > limit){
                item.label = item.label.substring(0,limit)+'...';
            }
            
              return $( "<li>" )
                .attr( "data-value", item.value )
                .append( $( "<a>" ).text( item.label ) )
                .appendTo( ul );
            }
        });
		$( "#tags" ).testcomplete({
			source: availableTags
		});
	});