JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/swanky-purse/jquery-ui.css">
<select id='select1'>
    <option value='009614'>011301101656</option><option value='009614'>011301UR0382</option><option value='009633'>011302102985</option><option value='009633'>011302103475</option><option value='009633'>011302103521</option><option value='009633'>011302109119</option><option value='009633'>011302111335</option><option value='009633'>011302119974</option><option value='009633'>011302121881</option><option value='009633'>011302122941</option><option value='009633'>011302U06742</option><option value='009633'>011302UR3249</option><option value='009615'>020501100672</option><option value='056550'>031401101947</option><option value='056550'>031401107420</option><option value='056550'>031401108659</option><option value='983418'>050410U01181</option><option value='986954'>050703000047</option><option value='994965'>053503U02261</option><option value='970023'>070401U00027</option><option value='994935'>072003U04331</option><option value='994935'>072003U16804</option><option value='985930'>072004U06280</option><option value='056547'>091002103689</option><option value='443629'>091004U03529</option><option value='443629'>091004U04993</option><option value='443629'>091004U04994</option><option value='443629'>091004U05133</option><option value='994895'>092101103014</option><option value='994895'>092101104547</option><option value='994895'>092101108574</option><option value='994895'>092101111525</option><option value='994895'>092101UR1032</option><option value='994895'>092101UR2431</option><option value='986108'>095802U04583</option><option value='031735'>100602100460</option><option value='031735'>100602101489</option><option value='031735'>100602102300</option><option value='984154'>110402U05394</option><option value='984154'>110402U08184</option><option value='984154'>110402U14169</option><option...

JavaScript

(function( $ ) {
        $.widget( "ui.combobox", {
            // default options
            options: {
                strict: true
            },
            _create: function() {
                var input,
                    self = this,
                    select = this.element.hide(),
                    selected = select.children( ":selected" ),
                    value = selected.val() ? selected.text() : "",
                    strict = this.options.strict,
                    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
                                    };
                            }) );
  ...