JSFiddle - React, Tailwind, and code Playground

by Jason Normandin

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
 <select data-placeholder="What are you looking for?" multiple class="chosen-select-width" tabindex="16">
<option value=""></option>
<option>Routers</option>
 <option>Routers in Group</option>
 <option>Routers in Location</option>
 <option>Routers in IP Range</option>
 <option>Routers by Vendor</option>
<option>Switches in Group</option>
<option>Switches in Location></option>
<option>Switches in IP Range></option>
<option>Switches by Venodr></option>
<option>Devices</option>
<option>Components</option>
<option>Sort</option>
<option>Columns</option>
<option>expand</option>
<option>filter</option>
<option>format</option>
<option>inline count</option>
<option>orderby</option>
<option>select</option>
<option>skip</option>
<option>skiptoken</option>
<option>top</option>
<option>not</option>
<option>and</option>
<option>or</option>
<option>less than</option>
<option>greater than</option>
<option>less than or equal</option>
<option>greater than or equal</option>
<option>equals</option>
<option>not equals</option>
 
<option>filter - ends with</option>
<option>filter -indexof</option>
<option>filter -replace</option>
<option>filter -startswith</option>
<option>filter -tolower</option>
<option>filter -toupper</option>
<option>filter -trim</option>
<option>filter -substring</option>
<option>filter -substringof</option>
<option>filter -concat</option>
<option>filter -length</option>
</select>


<div id="selectedlist">selected list bellow</div>
<p id="demo"></p>

CSS

#selectedlist { border: solid 1px #eee; margin-top:20px; padding:10px}

JavaScript

var config = {
    
      '.chosen-select-width'     : {width:"75%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
});