JSFiddle - React, Tailwind, and code Playground

by dushdushyant

HTML

<script src="https://rawgit.com/dellsala/Combo-Box-jQuery-Plugin/master/jquery/js/jquery.combobox.js"></script>
<div class="inputCombox">
    <input id="input1" type="text" value="" />
</div>
<div class="inputCombox">
   
    <input id="input2" type="text" value="" />
</div>

CSS

.inputCombox {
    padding:20px;
}
/*!
 * 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("http://source.dellsala.com/jquery-combobox/demo/jquery/css/jquery.combobox/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...

JavaScript

jQuery(function () {
    var varValue = 12;
    var aval = [
        'Yso',
        '1',
        'Jo',
    varValue.toString()];

    jQuery('#input1').combobox(aval);
    jQuery('#input2').combobox([
        'Yo',
        '1',
        'Jo']);
 
});


    $("#input2").change(function(){
    var tempValue=$(this).find('option:selected').val();
       alert(tempValue);
    }