JSFiddle - React, Tailwind, and code Playground

by Brandon DSouza

HTML

<div class="ui-widget">
    <select id="one"></select>
    <br/>
    <select id="two"></select>
</div>

CSS

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}

JavaScript

(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 id='fixu'>")
					                .appendTo(this.wrapper)
					                .val(value)
					                .attr("title", '')
					                .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
					                .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)
					                .attr("title", "Show All Items")
					                .tooltip()
					                .appendTo(this.wrapper)
					                .button({
					                icons: {
					                    primary:...