select2

  <link href="${base }/select2/select2.css" rel="stylesheet" type="text/css" />

  <script language="JavaScript" src="${base }/select2/jquery-1.7.2.js"></script>
  <script language="JavaScript" src="${base }/select2/select2.min.js"></script>

 

----------js-----------

$(document).ready(function() {     
    $("#userId").select2({
        placeholder: "SELECT A MEMBER",
        width:"200px",
        allowClear:true,
        query:searchUser,
     dropdownAutoWidth:true,
     dropdownCssClass:'dropdown',
        formatResult: formatUser,
        formatSelection: formatSelectionUser
      });
      $("#userId").on("change",
     function (e) {
        var user = getSelect2("userId");
      });
 
   });

 

function getSelect2(id){
  return  $("#"+id).select2("data");
 }
 
 function formatUser(state) {  
     var result = "<table class='getUser' style='width: 200px' ><tr><td>"+state.text+"</td></tr></table>";
     return result;
 }
 function formatSelectionUser(state) {  
     return state.text;
 }
 function searchUser(query) {
  var queueId = "";//$("#queues").val();
  var queue = getSelect2("queueId");
  if(queue != null && queue != ""){
   queueId = queue.id;
  }
  var teamId = $("#team").val();
  $.ajax({
   url: base + "/ajax/getUsersByName",
   async: true,
   type : "get",  
   dataType : "json",
   data: {"time": new Date().getTime(),"userName":query.term,"queueId":queueId,"teamId":teamId},
   success: function(data){
     query.callback({results: data});
   }
  });
 } 

 

------------html---------------------

<input id="userId" name="userId" />

 

 

-------------------java-------------------

 @RequestMapping(value="/getQueuesByName",method=RequestMethod.GET)
    @ResponseBody
    public JSONArray getQueuesByName(String queueName){
       JSONArray result = new JSONArray();
       try {
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("queueName", queueName);
           List<Queue> list = utilService.getQueuesByName(map);
           JSONObject object = null;
           if(list != null && list.size() > 0)
            for(int i=0;i<list.size();i++){
             object = new JSONObject();
             object.put("id",list.get(i).getId());
             object.put("text", list.get(i).getName());
             result.add(object);
            }
       }catch (Exception e) {
        e.printStackTrace();
           logger.error(e.getMessage());
       }
       return result;
    }

 

 ===================================select2 方式2============================

$(document).ready(function() { 
     $("#teams").select2({
      width:"200px",
      allowClear:true,
     formatResult: function(state){
                     return state.text;
                    }
    });

}

 

<select id="teams" onchange="refreshUsers('team',this.value);"  name="teamId" >
            <option value="">--SELECT--</option>
            <c:forEach items="${listLv}" var="codeInt">
             <option value="${codeInt.codeId }">${codeInt.codeDesc }</option>
            </c:forEach>
  </select>