chosen插件使用

    Chosen 是一个JavaScript插件，它对select选择框增加主动筛选的功能，可对列表进行分组，同时也可禁用某些选择项。目前，它支持 jQuery 和 Prototype 两种JavaScript引擎。
    示例： https://harvesthq.github.io/chosen/。
    使用Chosen版本1.6.1。
    一、页面引入Chosen插件库

<!-- chosen插件 -->
<script type="text/javascript" src="${ctx}/resource/js/chosen/chosen.jquery.js"></script>
<link href="${ctx}/resource/js/chosen/chosen.css" rel="stylesheet" type="text/css" />

二、初始化插件

$('.chosen').chosen({
    width: "150px",
	search_contains: true,//true-可根据中间字段模糊查询
	no_results_text: "没有匹配结果"
});

<select class="chosen" id="schoolId" name="schoolId" 
onchange="checkSchool()" style="width:150px;" data-placeholder="-请选择学校-">
	<option></option>
</select>

    遇到问题：
    1、chosen下拉框width为0px，如图所示：

解决：$('.chosen').chosen()设置width，如上面js代码所示。
也可修改chosen.css文件中样式添加width 150px !important:

.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 150px !important;//解决width未0px问题
}

    2、data-placeholder属性不生效
    解决：需添加空选项<option></option>，如上面html代码所示。
    三、动态更新ajax从后台传递过来数据,使用trigger("chosen:updated")

function querySchool() {
	var county = $("#district").val();
	$.ajax({ 
		type:'post', 
           url:'${ctx}/school/findSchoosJson',
           dataType:"json", 
           data:{"county":county},
           success:function(data){
               $("#schoolId").empty();
               $("#schoolId").append('<option></option>');
               $.each(data, function (idx, obj) {
                      $("#schoolId").append('<option value="' + obj.id + '">' + obj.name + '</option>');
                  });
                  $("#schoolId").trigger("chosen:updated");//更新下拉选项
           }, 
           error:function(data){
               alert("error"); 
           }
       });
}

猜你喜欢