JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" id="ac" /><br><br>
    <select id="cb" >
        <option value='01'></option>
        <option value='02'>Apple</option>
        <option value='03'>Pear</option>
        <option value='04'>Banana</option>
        <option value='05'>Cherry</option>
        <option value='06'>Apricot</option>
        <option value='07'>Mango</option>
        <option value='08'>Orange</option>
        <option value='09'>Grape</option>
        <option value='10'>Apple, Pear, Banana, Cherry, Apricot, Mango, Orange, Grape</option>
    </select>
    
</div>

CSS

.autocomplete-suggestions {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #999;
	background: #fff;
	cursor: default;
	overflow: auto;
	-webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
	-moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
	box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
}

.autocomplete-no-suggestion {
	padding: 2px 5px;
}

.autocomplete-selected {
	background: #F0F0F0;
}

.autocomplete-suggestions strong {
	font-weight: bold;
	color: #000;
}

.autocomplete-group {
	padding: 2px 5px;
	font-weight: bold;
	font-size: 16px;
	color: #000;
	display: block;
	border-bottom: 1px solid #000;
}

JavaScript

$("#ac").autocomplete({
    source: ["someveryverylonglongword",
        "someveryverylonglongwordsomeveryverylonglongword"]
});
/*
(function( $ ) {
    $.widget( "custom.combobox", {
	    _create: function() {
            this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );
            
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },
		 
        _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
                value = selected.val() ? selected.text() : "";
            
            this.input = $( "<input>" ).appendTo( this.wrapper )
                .val( value )
                .attr( "title", "" )
                .addClass( "custom-combobox-input" )
                .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) })
                .tooltip({ tooltipClass: "ui-state-highlight" });
            
            this._on( this.input, {
                autocompleteselect: function( event, ui ) { 
                    ui.item.option.selected = true; 
                    this._trigger( "select", event, { item: ui.item.option }); 
                },
                autocompletechange: "_removeIfInvalid"
            });
        },
        
        _createShowAllButton: function() {
            var input = this.input,
                wasOpen = false;
            
            $( "<a>" ).attr( "tabIndex", -1 )
                .tooltip()
                .appendTo( this.wrapper )
                .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false })
                .removeClass( "ui-corner-all" )
                .addClass( "custom-combobox-toggle" )
                .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); })
                .click(function() { 
                    input.focus();
                    
               ...