JSFiddle - React, Tailwind, and code Playground

by and7ey

HTML

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

CSS

.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 12px 0px 0 0px; padding: 0.48em 0 0.47em 0.45em; width: 65% }

JavaScript

// filter
$.widget("ui.combobox", {
    _create: function() {
        var self = this,
            select = this.element.hide(),
            selected = select.children(":selected"),
            value = selected.val() ? selected.text() : "";
        var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({
            delay: 0,
            minLength: 0,
            source: function(request, response) {
                $.ajax({
                    url: self.options.source,
                    type: "POST",
                    dataType: "jsonp",
                    data: {
                        featureClass: self.options.data.featureClass,
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function(data) {
                        data.geonames.unshift({
                            name: 'Any city',
                            countryName: ''
                        });

                        response($.map(data.geonames, function(item) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + (item.countryName ? ", " + item.countryName : ""),
                                value: item.name
                            }
                        }));
                    }
                })
            },
            select: function(event, ui) {
                alert('ui.item.value: ' + ui.item.value + '\n' + '$("#cbCity").value: ' + $("#cbCity .selected").val());
            },

        }).addClass("ui-widget ui-widget-content ui-corner-left");

        input.data("autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
        };

        this.button = $("<button type='button'>&nbsp;</button>").attr("tabIndex",...