JSFiddle - React, Tailwind, and code Playground

by pratik24

HTML

<select id="selectSavedReportCombobox" class="combobox custom-combobox" name="selectSavedReports" style="width: 200px">
                     <option></option>
                     <option value="holdingBin">Holding Bin</option>
                     <option value="patientChargeStatus">Patient Charge Status</option>
                     <option value="myCharges">My charges</option>
                     <option value="managedSavedReports">Managed Saved Reports</option>
                 </select>

JavaScript

$(function(){
    $("#selectSavedReportCombobox").change(function(){
        var selectSavedReportsValue=$(this).find(":selected").val();
        alert("selectSavedReportsValue");
    });
});

(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 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: {
                       ...