我现在的位置:

微知识 - 知识分享 - 电脑网络 - 编程开发
知识分享
  1. 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插件官方网址:

    https://harvesthq.github.io/chosen/

联系方式:

南京贝加达电子科技有限公司

  • 地址:南京市江北新区柳州北路21号涤太太科技大楼2F
  • 联系人:焦倩华(先生)
  • 手机:13813916308
  • 邮箱:Ser@bekda.com
  • 服务专线:400-8282-116
©2010-2024 Bekda Electronic Technology Co., Ltd. All right reserved.

苏公网安备 32011102010041号

320111201705278429

苏ICP备12027725号