JSFiddle - React, Tailwind, and code Playground

by john_b_ruddy

HTML

<meta charset="UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">    

<form name="parameters" action="" method="get" target="_parent">
    

    <select id="progCombo">
        <option value="ActionScript ActionScript">ActionScript ActionScript</option>
        <option value="AppleScript AppleScript">AppleScript AppleScript</option>
        <option value="Asp Asp">Asp Asp</option>
        <option value="BASIC BASIC">BASIC BASIC</option>
        <option value="C C">C C</option>
        <option value="C++ C++">C++ C++</option>
        <option value="Clojure Clojure">Clojure Clojure</option>
        <option value="COBOL COBOL">COBOL COBOL</option>
        <option value="ColdFusion ColdFusion">ColdFusion ColdFusion</option>
        <option value="Erlang Erlang">Erlang Erlang</option>
        <option value="Fortran Fortran">Fortran Fortran</option>
        <option value="Groovy Groovy">Groovy Groovy</option>
        <option value="Haskell Haskell">Haskell Haskell</option>
        <option value="Java Java">Java Java</option>
        <option value="JavaScript JavaScript">JavaScript JavaScript</option>
        <option value="Lisp Lisp">Lisp Lisp</option>
        <option value="Perl Perl">Perl Perl</option>
        <option value="PHP PHP">PHP PHP</option>
        <option value="Python Python">Python Python</option>
        <option value="Ruby Ruby">Ruby Ruby</option>
        <option value="Scala Scala">Scala Scala</option>
        <option value="Scheme Scheme">Scheme Scheme</option>
    </select>
    <br /><br />

    <input type="text" id="destination" name="destination" readonly="readonly"/> (clicking will copy the selected option here)
                   
</form>

CSS

input[disabled='disabled'],select[disabled='disabled']{
    background-color: #FFFFFF;
}

ul.ui-autocomplete.ui-menu,ui-autocomplete-input{
    font-family: Helvetica;
    font-size:12px;
}
.ui-autocomplete{
    /* Set the fixed height for autocomplete dropdown */
    max-height: 350px;
    min-height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.ui-combobox {
    position: relative;
    display: inline-block;
}
.ui-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.ui-combobox-input {
    width: 369px;
    margin: 0;
    padding: 0.3em;
}

label.ui-state-active.ui-button{
    font-weight: bold;
    color: #000099;
    width: 60px;
}
.result{
    font-weight: bold;
    color: #000099;
}

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( requestObj, responseFunc ) {
                        var matchArry = $("select > option").map(function(){return this.innerHTML;}).get();
                        var srchTerms   = $.trim(requestObj.term).split(/\s+/);
                        
                        // For each search term, remove non-matches
                        $.each (srchTerms, function (J, term) {
                            var regX = new RegExp (term, "i");
                            matchArry = $.map (matchArry, function (item) {
                                if( regX.test(item) ){
                                    return{
                                        label: item,
                                        value: item,
                                        option: HTMLOptionElement   // either this is wrong
                                    } ?  item  : null;              // or this is wrong
                                }
                            } );
                        });
                        
                        // Return the match results
                        responseFunc (matchArry);
                    },
                    
                    open:   function (event, ui) {
               ...