chosen
1、插件介绍
chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。
chosen插件下载和教程：https://harvesthq.github.io/chosen/。
chosen插件的选项：https://harvesthq.github.io/chosen/options.html
chosen插件依赖于jQuery库或prototype，使用之前要先引入jQuery或prototype。我使用的是chosen1.5.1版本的，要求jQuery1.7，支持IE8+（IE7及以下版本会优雅降级）。
2、插件使用
引入jquery插件和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)。可以把selector写成样式类，这样执行完chosen函数后，只要加上样式类就可以了。
1）使用案例
<head>
<meta charset="utf-8">
<link href='https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css' rel='stylesheet'/>
<style>
.w-country{width:100px;}
</style>
<script src='https://code.jquery.com/jquery-1.9.0.js'></script>
<script src='https://cdn.bootcss.com/chosen/1.5.1/chosen.jquery.js'></script>
<script>
$(function(){
$('.chosen').chosen({
no_results_text: "没有找到结果！",//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
placeholder_text_single: '选择国家', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
max_shown_results: 1000, //下拉框最大显示选项数量
display_disabled_options: false,
single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
group_search: false, //选项组是否可搜。此处搜索不可搜
include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
});
$('.chosen2').chosen({
search_contains:false,
enable_split_word_search: true //分词搜索，选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
});
});
</script>
</head>
<body>
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
<option value=""></option>
<option value="China">中国</option>
<option value="US">US</option>
<option value="England">英国</option>
<option value="Canada">加拿大</option>
<option value="Cube">古巴</option>
</select>
<br/><br/>
<select class='chosen'>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<br/><br/>
<select class='chosen2' >
<option value=""></option>
<option value="vegetable">西红柿 黄瓜 芹菜</option>
<option value="fruit">葡萄 草莓 芭乐[潘石榴]</option>
</select>
</body>上面第三个输入框输入“黄瓜”会匹配到结果，但输入“瓜”没有匹配的结果。这是因为禁用模糊搜索并开启了分词搜索，可以从词开头开始匹配。词的边界是空格，“黄瓜”前面有空格，而”瓜“前面无空格。
2）属性
可以通过在 源<select> 上设置属性传递给 Chosen。
| 选项 | 描述 |
|---|---|
| data-placeholder | 占位符文字。注意： 该属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。 |
| multiple | 有此属性的 select 会渲染成可以多选的 Chosen 选框 |
| selected, disabled | 设置选中、禁止状态，Chosen 会读取这些属性 |
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
<option value=""></option>
<option value="China" selected>中国
<option value="Canada" disabled>加拿大</option>
</select>| 选项 | 默认值 | 描述 |
|---|---|---|
| allow_single_deselect | false | 设置为 true 时非必选的单选框会显示清除选中项图标（x号）。（非必须是指包括空选项，空选项的文本和值都为空） |
| disable_search | false | 禁用搜索。设置为 true 时会隐藏单选框的搜索框 |
| disable_search_threshold | 0 | 禁用搜索项的选项阈值。 选项数量少于这个阈值时隐藏搜索框 |
| enable_split_word_search | true | 是否开启分词搜索，默认开启 |
| inherit_select_classes | false | 是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上 |
| max_selected_options | Infinity | 最多选择项数，达到最大限制时会触发 chosen:maxselected 事件 |
| no_results_text | "No results match" | 没有搜索到匹配项时显示的文字 |
| placeholder_text_multiple | "Select Some Options" | 多选框没有选中项时显示的占位文字 |
| placeholder_text_single | "Select an Option" | 单选框没有选中项时显示的占位文字 |
| search_contains | false | 模糊搜索。false表示从第一个字符开始匹配，true表示只要选项包含搜索词即可 |
| single_backstroke_delete | true | 多选框中使用一次退格键即可删除选中项目。为true，点击一次退格键即可删除。如果设为 false，第一次按 delete/backspace 会高亮要删除的选中项目，再按delete/backspace会删除该选项 |
| group_search | true | 选项组是否可搜索。false不可搜索，true可搜索 |
| width | Original select width. | Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致。这个值会覆盖原select的宽度。如果执行chosen()函数时下拉框还是隐藏的，必须设置width，否则下拉框设置为可见时宽度为0。 |
| display_disabled_options | true | 是否显示禁止选择的项目 |
| display_selected_options | true | 多选框是否在下拉列表中显示已经选中的项。为false时下拉列表不显示选中选项，为true时下拉列表会显示选中选项，但会用特殊的样式标识。这个选项对单选框无效。 |
| include_group_label_in_selected | false | 选中选项是否显示选项分组。false不显示，true显示。默认false。 |
| max_shown_results | Infinity | 搜索结果最大显示数量。数量设置得小，可以提高速度。 |
| case_sensitive_search | false | 搜索大小写敏感。为false大小写不敏感，为true大小写不敏感。chosen1.5.1还不支持。 |
| hide_results_on_select | true | 搜索结果隐藏选中选项，只对多选框有效。为true表示隐藏，为false表示不隐藏。chosen1.5.1还不支持。 |
| rtl | false | 文字方向是否改为从右向左。true表示文字方向从右向左，false表示从左向右。chosen1.5.1还不支持，但是可以给下拉框加上chosen-rtl。但是未来chosen会去掉这个样式类 |
4）监听事件
Chosen 会在源 <select> 元素上监听事件。
$('.chosen').on('change', function(e, params) {
do_something(e, params);
});| 选项 | 描述 |
|---|---|
change | Chosen 触发标准的 change 事件，同时会传递 selected or deselected 参数， 方便用户获取改变的选项 |
| chosen:ready | Chosen 实例化完成时触发 |
| chosen:maxselected | 超过 max_selected_options 设置时触发 |
| chosen:showing_dropdown | Chosen 下拉选框打开完成时触发 |
| chosen:hiding_dropdown | Chosen 下拉选框关闭完成时触发 |
| chosen:no_results | 搜索没有匹配项时触发 |
注意：所有Chosen自定义事件都包含Chosen实例。chosen 对象作为参数。
5）Chosen 触发的事件
通过在 源<select> 元素上触发特定事件：
$('.chosen').trigger('chosen:updated');| 选项 | 描述 |
|---|---|
| chosen:updated | 通过 JS 改变 select 元素选项时应该触发此事件，以更新 Chosen 生成的选框 |
| chosen:activate | 相当于 HTML focus 事件 |
| chosen:open | Chosen 并显示搜索结果 |
| chosen:close | 关闭 Chosen 并隐藏搜索结果 |
chosen插件可以通过控制下拉框显示的最大数量来达到优化的目的。
$('.chosen').chosen({
max_shown_results: 1000, //下拉框最大显示选项数量
});比如某项目的团队管理页面有30个下拉框（选择团队成员），每个下拉框有1300个选项。IE8加载该页面需要耗时45s，根本没法使用。看下设置下拉框最大显示数量。
| 浏览器 | 火狐 | 谷歌 | IE | |||
|---|---|---|---|---|---|---|
| 优化后 | 效率提升 | 优化前 | 效率提升 | 优化前 | 效率提升 | |
| 1300 | 0.063 | 0.074 | 0.822 | |||
| 500 | 0.031 | 51.0% | 0.037 | 43.0% | 0.453 | 25.1% |
| 100 | 0.013 | 79.0% | 0.017 | 66.3% | 0.294 | 36.0% |
4、chosen插件优化（修改插件）
1）优化思路
chosen插件使用还是很方便，但是有多个下拉框且下拉框的数量比较多时就会比较慢，尤其是IE浏览器。上面虽然提到可以通过控制选项数量来提高效率，但这种方式并不适合所有场景。搜索结果有些不显示，用户直接拖动选择的时候会找不到目标选项。需要通过其他方式来优化
比如上面提到的某项目的团队管理页面有30个下拉框（选择团队成员），每个下拉框有1300个选项。IE8加载该页面需要耗时45s，根本没法使用。
chosen插件的实现原理其实是获取原下拉框的数据，构造一个新的chosen下拉框。下拉框数据量多的时候，构造这个列表还是挺耗时的，IE8将近1s。之所以加载慢是因为chosen插件在加载页面的时候就构造了所有的chosen下拉框。
优化思路就是页面加载的时候chosen下拉框不加载所有原下拉框的数据，而只获取选中项。等到用户第一次点击下拉框的时候再去获取完整的原下拉选项。把耗时分摊到第一次点击下拉框。这样提高用户体验：一个是因为用户并不会点击所有的下拉框，因此总耗时其实是减少的；另外页面加载时间耗时，用户根本不想等待，如果是分摊下去，耗时并不多，用户感受也不明显。
2）优化效果（以团队管理页面为例）
| 浏览器 | 优化前 | 优化后 | 效率提高 | ||||||
|---|---|---|---|---|---|---|---|---|---|
| 页面加载 | 单个下拉框 | 总耗时 | 页面加载 | 单个下拉框 | 总耗时 | 页面加载 | 单个下拉框 | 总耗时 | |
| 火狐 | 0.683 | 0.063 | 2.573 | 0.473 | 0.473 | 2.633 | 30.75% | -14.29% | -2.33% |
| 谷歌 | 0.393 | 0.074 | 2.613 | 0.273 | 2.853 | 0.473 | 30.53% | -16.22% | -9.18% |
| IE | 21.259 | 0.822 | 45.919 | 1.223 | 1.468 | 45.263 | 94.52% | -78.25% | 1.43% |
注意：
- 总耗时 = 页面加载 + 单个下拉框 * 下拉框总数
- 上表中的单个下拉框的耗时是指第一次点击下拉框的耗时，第一次以后点击下拉框，优化前和优化后耗时是一样的。所以上面的单个下拉框耗时和总耗时虽然是下降的，但是考虑用户并不会点击所有下拉框，总体上用户体验度是上升的。
3）优化的代码
执行chosen()函数会调用 set_up_html函数，set_up_html()函数会调用results_build()函数，用于构造下拉选项。
我们要给results_build()加上参数only_selected_option，用于标识构造的下拉列表是否只包含选中选项，false标识包含所有选项。
set_up_html()调用results_build()时，参数only_selected_option设置为true。
另外第一次点击下拉框时，要执行results_build()，参数only_selected_option设置为true。
Chosen.prototype.set_up_html = function() {
......
this.results_build(true); //only_selected_option参数设置为true
......
}
Chosen.prototype.register_observers = function() {
var _this = this;
this.container.bind('mousedown.chosen', function(evt) {
/*新增代码。第一次点击下拉框时构建完整的下拉框列表*/
if(_this.results_data.length < _this.form_field.options.length) {
_this.results_build(false);
}
_this.container_mousedown(evt); //原有代码
});
}
/*增加only_selected_option参数*/
Chosen.prototype.results_build = function(only_selected_option) {
......
this.results_data = Selectparser.select_to_array(this.form_field);
......
}
/*增加only_selected_option参数*/
SelectParser.select_to_array = function(select, only_selected_option) {
var child, parser, _i, _len, _ref, is_optgroup;
is_optgroup = select.children[0].nodeName.toUpperCase() == 'OPTGROUP'; //新增的变量
only_selected_option = !!only_selected_option; //默认false
parser = new SelectParser();
_ref = select.childNodes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
child = _ref[_i];
/*如果是OPTGROUP，要先加到parser中，后面再对OPTGROUP中的选项做处理；如果当前选项是当前要获取的是全部选项或只获取选中选项*/
if(is_optgroup || (!only_selected_option || child.selected)) {
parser.add_node(child);
}
}
return parser.parsed;
}
参考文章：Amaze UI Chosen、官网Chosen介绍
相关阅读
<select id="select1" class="select1"> <option value='value1'>value1</option> <option value='value