chosen plugin use

    Chosen is a JavaScript plugin that adds active filtering to the select box, grouping the list and disabling certain options. Currently, it supports both jQuery and Prototype JavaScript engines.
    Example: https://harvesthq.github.io/chosen/ .
    Using Chosen version 1.6.1.
    1. The page introduces the Chosen plugin library
   

<!-- chosen plugin-->
<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" />

    2. Initialize the plugin
   

$('.chosen').chosen({
    width: "150px",
	search_contains: true,//true-fuzzy query based on intermediate fields
	no_results_text: "No matching results"
});

   

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

    Problems encountered:
    1. The width of the choose drop-down box is 0px, as shown in the figure:
   
    Solution: $('.chosen').chosen() sets the width, as shown in the js code above.
    You can also modify the style in the chosen.css file to add 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;//Solve the problem of width not 0px
}

    2. The data-placeholder attribute does not take effect
    . Solution: You need to add an empty option <option></option>, as shown in the html code above.
    3. Dynamically update ajax to pass data from the background, use 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");//Update drop-down options
           },
           error:function(data){
               alert("error");
           }
       });
}