JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/docsupport/style.css">
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<!doctype html>
<html lang="en"><!-- Source is http://harvesthq.github.com/chosen/ -->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Chosen - a javascript plug-in for jQuery and Prototype - makes select boxes better</title>
<meta name="description" content="">
<meta name="author" content="Patrick Filler, Harvest">
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
})();
</script>
<![endif]-->
</head>
<body>
<div id="container">
<header>
<a href="http://www.getharvest.com/">Built by Harvest</a>
<h1>Chosen</h1>
</header>
<div id="content">
<div id="container">
<h2>Selected and Disabled Support</h2>
<div class="side-by-side clearfix">
<p>Chosen automatically highlights selected options and removes disabled options.</p>
<div>
<em>Multiple Select with Groups</em>
<select id="bears_multiple" title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select-disable" tabindex="8">
<option...
JavaScript
/*
Chosen, a Select Box Enhancer for jQuery and Protoype
by Patrick Filler for Harvest, http://getharvest.com
Available for use under the MIT License, http://en.wikipedia.org/wiki/MIT_License
Copyright (c) 2011 by Harvest
*/
(function(){var $,Chosen,SelectParser,get_side_border_padding,root;var __bind=function(fn,me){return function(){return fn.apply(me,arguments);};};root=typeof exports!=="undefined"&&exports!==null?exports:this;$=jQuery;$.fn.extend({chosen:function(data,options){return $(this).each(function(input_field){if(!($(this)).hasClass("chzn-done")){return new Chosen(this,data,options);}});},chosenClass:function(){return Chosen;}});Chosen=(function(){function Chosen(elmn){this.set_default_values();this.form_field=elmn;this.form_field_jq=$(this.form_field);this.is_multiple=this.form_field.multiple;this.default_text_default=this.form_field.multiple?"Select Some Options":"Select an Option";this.set_up_html();this.register_observers();this.form_field_jq.addClass("chzn-done");}Chosen.prototype.set_default_values=function(){this.click_test_action=__bind(function(evt){return this.test_active_click(evt);},this);this.active_field=false;this.mouse_on_container=false;this.results_showing=false;this.result_highlighted=null;this.result_single_selected=null;return this.choices=0;};Chosen.prototype.set_up_html=function(){var container_div,dd_top,dd_width,sf_width;this.container_id=this.form_field.id+"_chzn";this.f_width=this.form_field_jq.width();this.default_text=this.form_field_jq.attr("title")?this.form_field_jq.attr("title"):this.default_text_default;container_div=$("<div />",{id:this.container_id,"class":"chzn-container",style:"width: "+this.f_width+"px;"});if(this.is_multiple){container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="'+this.default_text+'" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');}else{container_div.html('<a...