JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="demo">
    <div class="ui-widget">
        <label>City: </label>
        <select id="searchbox">
            <option value="">Select one...</option>
            <option value="Madras">Madras</option>
            <option value="Madagascar">Madagascar</option>
            <option value="Calcutta">Calcutta</option>
            <option value="Calicut">Calicut</option>
            <option value="California">California</option>
            <option value="Kerala">Kerala</option>
            <option value="Goa">Goa</option>
        </select>
    </div>
</div>

CSS

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

JavaScript

function filterOptionsForResponse(select, term) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
    var returnData = select.children("option").map(function() {
        var text = $(this).text();
        if (this.value && (!term || matcher.test(text))) return {
            label: text.replace(
            new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
            value: text,
            option: this
        };
    });
    return returnData;
}

function updateOptions(select, searchResultData) {
    if ( !! searchResultData) {
        var givenOptions = select.children("option").map(function() {
            if ( !! this.value) return this.value.toLowerCase();
        });

        $.each(searchResultData, function(i, item) {
            if ($.inArray(item.name.toLowerCase(), givenOptions) == -1) select.append('<option value="' + item.name + '">' + item.name + '</option>');
        });
    }
}

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

        input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default").autocomplete({
            delay: 0,
            minLength: 0,
            source: function(request, response) {
                // implements retrieving and filtering data from the select
                var term = request.term;

                if (term.length >= 3) {
                    var abbreviation = term.substring(0, 3);
                    if (!(abbreviation.toLowerCase() in cache)) {
                        cache[abbreviation.toLowerCase()] = 1;
                        $.ajax({
                            url:...