JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<form action="" method="GET">
    <label>Search for a designation: </label>
    <select id="combobox" name="designation">
        <option value=""></option>
            <option value="1">Test 1a</option>
            <option value="2">Test 2b</option>
            <option value="3">Test 3c</option>
        <optgroup label="Category 1">
            <option value="1">Test 1</option>
            <option value="2">Test 2</option>
            <option value="3">Test 3</option>
        </optgroup>
        <optgroup label="Category 2">
            <option value="a">Test a</option>
            <option value="b">Test b</option>
            <option value="c">Test c</option>
        </optgroup>
    </select><br/>
    <input type="submit" name="Submit" value="submit">
    </form>
<div id="test" style="display: none;"><ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 43px; left: 238.283px; display: block; width: 577px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches</a></li></ul></div>
</div>
</div><!-- End demo -->
</body>

</html>

CSS

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

JavaScript

(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
                                };
                        //MK 
                        $('#test').attr('style', 'display: none;');    
                        }) );
                    },
                    select: function( event, ui ) {
                        ui.item.option.selected = true;
                        self._trigger(...