JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<div class="container">
    <select id="poop">
    </select>
    <span>A</span>
</div>

CSS

.custom-combobox-input {
    width:100%;
    background-image:url('https://www.stribild.com/hcp/Content/img/dropdown_arrow.png');
    background-repeat:no-repeat;
    background-position:right;
  }
.container{
    width:500px;
    border:1px solid black;
}

JavaScript

(function( $ ) {
    $.widget( "custom.combobox", {
      _create: function() {
        this.element.hide();
        this._createAutocomplete();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .insertAfter( this.element )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input" )
          .autocomplete({
            delay: 0,
            minLength: 0,
              select:function(){
                     $(this).blur();
              },
            source: this.options.source
          }).focus(function(){
              $(this).autocomplete( "search", "" );
          })
          .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"
        });
      }, 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
  })( jQuery );
var source = [];
for(var i = 0 ; i < 5000 ; i++){
    source.push(i+"");
}
$("#poop").combobox({source:source})