JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<script src="https://rawgit.com/dellsala/Combo-Box-jQuery-Plugin/master/jquery/js/jquery.combobox.js"></script>
<div>
        <label for="input1">Field1:</label> <input id="input1" type="text" value="">
        <label for="input2">Field2:</label> <input id="input2" type="text" value="Hello"><br>
        <br>
        <br>
        <input id="option_changer" type="button" value="Change Field 1 Options">
    </div>

CSS

/*!
 * Combobox Plugin for jQuery, version 0.5.0
 *
 * Copyright 2012, Dell Sala
 * http://dellsala.com/
 * https://github.com/dellsala/Combo-Box-jQuery-Plugin
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Date: 2012-01-15
 */
.combobox {
    margin-right: 0.1em;
}
.combobox_arrow{
  

    background: transparent url("down-arrow.png") no-repeat center center;
    display: block;
    height: 100%;
    width: 100%;

}
.combobox_button {

  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius   : 0 4px 4px 0;
  border-radius        : 0 4px 4px 0;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  background: #ccc;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
  background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
  background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
  background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
  background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 18px;

}

.combobox_button:hover {
    text-decoration: none;
}

.combobox_button {
    * top: 1px !important;
}

.combobox_selector {
    background-color: #EEE;
    font-family: Helvetia, Arial, sans-serif;
    font-size: 12px;
    z-index: 1000;
    max-height: 200px;
    overflow: auto;
}

.combobox_selector ul {
    padding: 0;
    margin: 0;
    list-style: none;
    border:1px solid #CCC;
}

.combobox_selector li {
    padding: 2px 5px;
}

.combobox_selector li:hover,
.combobox_selector li.selected {
    background-color: #0066CC;
    color: #FFF;
}

JavaScript

jQuery(function () {
        jQuery('#input1').combobox([
            'Foo',
            'Bar',
            'Bartender',
            'Hello',
            'Master',
            'Monster',
            'Monorail',
            'Octopus has eight legs',
            'Octagon',
            'Often',
            'World',
            'wacko',
            'woo'
        ]);

        jQuery('#input2').combobox([
            'Yo',
            'Mo',
            'Jo'
        ]);
        
        jQuery('#option_changer').click(function (e) {
            jQuery.combobox.instances[0].setSelectOptions([
                'Apples',
                'Oranges',
                'Bananas'
            ]);
        });
        
    });
    (function () {

    jQuery.fn.combobox = function (selectOptions) {
    
        return this.each(function () {
            var newCombobox = new Combobox(this, selectOptions);
            jQuery.combobox.instances.push(newCombobox);
        });
    
    };

    jQuery.combobox = {
        instances : []
    };