位置:首页 > JavaScript > JavaScript >

chosen插件使用及优化

字号+ 作者:micloud 来源:www.seoalphas.com 2019-02-25 19:26 浏览量:1975

在学习使用zui UI时引用了chosen插件,但是zui给的文档不够详细,该有的参数没有给出来,导致我最后获得选择的值的时候无从下手了。还是在网上搜了下,CSDN上发现这篇文章,顺利解决问题,mark一下。

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>

3)选项

选项 默认值 描述
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 并隐藏搜索结果

3、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介绍

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • js操作radio单选框改变事件 点击radio执行相应操作

    js操作radio单选框改变事件 点击radio执行相应操作

    浏览次数:15122

  • 关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    浏览次数:12750

  • JavaScript中对url进行编码:urlencode编码

    JavaScript中对url进行编码:urlencode编码

    浏览次数:11365

  • js清除两个数组相同数据(js两个数组对比 去除相同项得到新数组)

    js清除两个数组相同数据(js两个数组对比 去除相同项得到新数组)

    浏览次数:6280

网友点评
评论区域