欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  jQuery-Chosen插件、带自动搜索下拉的使用

JS工具 网络 454 0评论

Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。


关于Jquery chosen的介绍(https://harvesthq.github.io/chosen/  ):

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.(chosen是一个jQuery插件:它会使冗长笨重的选择框变得更加的友好。)因为它有较多是介绍,以及相对比较全面的api,所以使用起来就相当方便。

百度网盘下载:https://pan.baidu.com/s/1Xyd0pygER3jJzFevn5gV4g (chosen_v1.8.7)


1.使用方法:


1)在页面中只需引入相应文件即可:

...
    <link href="chosen.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="chosen.jquery.js"></script>
...


2)在html中创建相应的select元素:

...
<select data-placeholder="选择部门" style="width:150px;" class="dept_select" placeholder="请选择">
    <option value="部门1">部门1</option>
    <option value="部门2">部门2</option>
    <option value="部门3">部门3</option>
    <option value="部门4">部门4</option>
    <option value="部门5">部门5</option>
</select>
...


3)然后在script标签中初始化chosen标签:

jQuery(".dept_select").chosen();


这样就完成了设置,是不是很简单,新来看看效果:

7aec54e736d12f2ea5f3c08844c2d56284356867.jpg


2.关于chosen的一些设置:


1)通过参数传递的选项

如:当搜索不到的时候,更改默认提示语

//匹配没有结果时的显示文字
$(".dept_select").chosen({
    no_results_text:"没有找到", 
    allow_single_deselect:true
});

以下参数在实例化的时候通过参数设置。

$('.my_select_box').chosen({
  disable_search_threshold: 10,
  no_results_text: 'Oops, nothing found!',
  width: '95%'
});
选项默认值描述
allow_single_deselectfalse设置为 true 时非必选的单选框会显示清除选中项图标
disable_searchfalse设置为 true 隐藏单选框的搜索框
disable_search_threshold0少于 n 项时隐藏搜索框
enable_split_word_searchtrue是否开启分词搜索,默认开启
inherit_select_classesfalse是否继承 select 元素的 class,如果设为 true,Chosen 将把 select 的 class 添加到容器上
max_selected_optionsInfinity最多选择项数,达到最大限制时会触发 chosen:maxselected 事件
no_results_text"No results match"没有搜索到匹配项时显示的文字
placeholder_text_multiple"Select Some Options"多选框没有选中项时显示的占位文字
placeholder_text_single"Select an Option"单选框没有选中项时显示的占位文字
search_containsfalse搜素包含项,默认从第一个字符开始匹配
single_backstroke_deletetrue多选框中使用退格键删除选中项目,如果设为 false,第一次按 delete/backspace 会高亮最好一个选中项目,再按会删除该项
widthOriginal select width.Chosen 生成的选择框宽度,默认为和原 select 宽度保持一致
display_disabled_optionstrue是否显示禁止选择的项目
display_selected_optionstrue多选框是否在下拉列表中显示已经选中的项


2)Chosen属性

可以通过在 <select> 上设置属性传递给 Chosen。

<select class="my_select_box" data-placeholder="Select Your Options">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3" disabled>Option 3</option>
</select>

data-placeholder占位符文字 (注意: 改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。)

multiple有此属性的 select 会渲染成可以多选的 Chosen 选框

selected, disabled设置选中、禁止状态,Chosen 会读取这些属性


3)chosen监听的事件:

通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。

// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');

chosen:updated   通过js改变select元素选项时应该触发此事件,以更新chosen生成的选框;

chosen:active   相当于HTML 的focus事件(元素获得焦点时候的事件);

chosen:open  激活chosen并显示搜索的结果。

chosen:close 关闭 Chosen 并隐藏搜索结果

(在对chosen的下拉框做数据初始化或者通过js给下拉框插入option之后都需要更新chosen)


4)chosen触发的事件:

Chosen 会在源 <select> 元素上触发事件。

jQuery('.my_select_box').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   搜索没有匹配时触发


5其他问题:

1、当js更新select(改变选中项、添加option等)后,执行以下操作,用来更新chosen选框

$(".chosen-select").trigger("chosen:updated");  //$(".chosen-select")为select元素


2、allow_single_deselect清空选中项 不起作用

select中必须有一个空的option,尤其是动态更新option的情况下,更新前后都要有一个空的option,否则不能正常显示清空图标


3、如果不想要搜索框的话,很简单,用css把它隐藏掉就OK了:

.chzn-container-single
 .chzn-search {
    display:
none;
}


4、远程加载数据数据(例):

jQuery.ajax({
             url: '/information/information/citiesall',//这个url用来获取所有数据l
             dataType: "json",
             var html =''; 
             success: function (data) {
                  jQuery(".cid-select").chosen({maxHeight: 200});
                    for (var i = 0; i < data.length; i++) {
                       html+='<option value="'+result[i].id+'">'+result[i].name+'</option>'
                    }
                       jQuery(".cid_select").append(html);
                 }
 });


转载请注明: ITTXX.CN--分享互联网 » jQuery-Chosen插件、带自动搜索下拉的使用

最后更新:2018-10-18 17:41:49

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽