JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<div id="divselect" class="ui-widget">
    <select id="cbCity" style="display:none">
        <option value="0">Any city</option>
        <option value="1">Other city</option>
    </select>    
</div>
<div class="ui-widget">
<button id="showAnyCity">show Any city</button>
</div>

CSS

.ui-combobox {
        position: relative;
        display: inline-block;
    }
    .ui-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -24px;
        
        padding: 0;
        /* adjust styles for IE 6/7 */
        *height: 1.7em;
        *top: 0.1em;
    }
    .ui-combobox-input {
        margin: 0;
        padding: 0.3em;
    }

JavaScript

// filter
(function($) {
    $.widget("ui.combobox", {
        _create: function() {
            var input, self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "",
                wrapper = this.wrapper = $("<span>").addClass("ui-combobox").insertAfter(select);

            input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default ui-combobox-input").autocomplete({
                delay: 0,
                minLength: 0,
                source: function(request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(select.children("option").map(function() {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text))) return {
                            label: text.replace(
                            new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                            value: text,
                            option: this
                        };
                    }));
                },
                select: function(event, ui) {
                    ui.item.option.selected = true;
                    //                             console.log('self check');
                    //                            console.log(self);
                    //                            console.log('this');
                    //                            console.log(this);
                    self._trigger("change", event, {
                        item: ui.item.option
                    });
                },
                change: function(event, ui) {

                    if (!ui.item) {
                        var matcher = new RegExp("^" +...