chosen select 选择框插件使用搜索功能时,鼠标无法正常定位选择的列表数据。
完善时间:2020-03-26 11:21:05会员:bekda目录:电脑网络 - 编程开发浏览:1518 次
chosen 是一款不错的select下位选择框插件,使用搜索功能时,鼠标无法正常定位选择的列表数据,使用键盘上下选择并回车却是可以的。
问题原因:初始化时设置了【是否继承原下拉框的样式类】属性:inherit_select_classes:true。
解决办法:将【是否继承原下拉框的样式类】属性设置为:false,具体如下:
$(".chosen").chosen({ inherit_select_classes:false, //是否继承原下拉框的样式类,继承时如动态筛选无法准确定位 });
更多参数设置可参照以下示例:
$(".chosen").chosen({ width:"95%", //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖,eg:"400px"|"100%"。 rtl: false, //设置右对齐 no_results_text:"未找到:", //搜索无结果时显示的提示 search_contains:true, //关键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配 enable_split_word_search:true, //是否开启分词搜索,默认开启 allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许,选中选项会有一个x号可以删除选项(select中必须有一个空option) disable_search:false, //禁用搜索。设置为true,则无法搜索选项。 disable_search_threshold: 10, //当选项少于指定个数时禁用搜索。 inherit_select_classes:false, //是否继承原下拉框的样式类,继承时如动态筛选无法准确定位 placeholder_text_single: '--- 请选择 ---', //单选框默认提示,选项为空时显示。如原下拉框设置了data-placeholder,会覆盖此值。 max_shown_results:2000, //下拉框最大显示选项数量 max_selected_options:1, //最多选择项数,达到最大限制时会触发 chosen:maxselected 事件 display_disabled_options:false, //是否显示禁止选择的项目 display_selected_options:true, //多选框是否在下拉列表中显示已经选中的项 single_backstroke_delete:false, //false表示按两次删除键才能删除选项,true表示按一次删除键即可删除 case_sensitive_search:false, //搜索大小写敏感。此处设为不敏感 group_search:false, //选项组是否可搜。此处搜索不可搜 include_group_label_in_selected:false //选中选项是否显示选项分组。false不显示,true显示。 }); //数据同步更新 $(".chosen").change(function(){ $(".chosen").trigger("chosen:updated"); });
chosen插件官方网址:
发布日期:2020/01/15
发布日期:2019/07/22
发布日期:2019/03/17
苏公网安备 32011102010041号
320111201705278429
苏ICP备12027725号