EasyUI —— 下拉选模糊匹配搜索

一、静态拼接下拉框

效果

html

JS

$(function(){
    	   autoChannelCompanyData("channelCompanyName",permission_Key);
   });

//自动补全客户名称
    function autoChannelCompanyData( inputPositionId ,permission_Key){
    	$("#"+inputPositionId).combobox({
  	    	prompt:'自动搜索',
  	        valueField:'channelCompanyId',
  	        textField:'channelCompanyName',
  	        mode: 'remote',  
  	        panelWidth:140,
  	        panelHeight:'auto',
			delay:300,
			loader:function(param,success,error)
  	        {
				var q = param.q || '';
	            var para = encodeURIComponent(encodeURIComponent(param.q,"UTF-8"),"UTF-8");
                var url=contextPath+'/common/getChannelCompanyName.do?instr='+para+"&permission_Key="+permission_Key;
	            $.ajax({
	                type: 'get',
	                url: url,
	                dataType: 'json',
	                success: function(data) {
	                    var items = $.each(data, function(value) {
	                        return this; //遍历数组中的值    
	                    });
	                    success(items);//调用loader的success方法，将items添加到下拉框中
	                },
	                error: function() {
	                    error.apply(this);
	                }
	            });
  	        },
  	        onBeforeLoad: function(param){
	  	        if(param == null || param.q == null || param.q.replace(/ /g, '') == ''){
	  	          var value = $(this).combobox('getValue');
	  	          if(value){// 修改的时候才会出现q为空而value不为空
	  	            param.id = value;
	  	            return true;
	  	          }
	  	          return false;
	  	        }
  	        },
  	        onHidePanel: function () { //隐藏下拉框时,若未选中任何值，默认选中第一项
 				var list = $(this).combobox("getData");
 				var selectVal = $(this).combobox("getValue");
 				var isSelect = ($.trim(selectVal) == '');
 				for(var item in list){
 					isSelect = isSelect || list[item]['channelCompanyId'] == selectVal;
 				}
 				if(!isSelect){
 					if(list[0]!=undefined){
 						$(this).combobox("select", list[0]['channelCompanyId']);
 					}else{
 						$(this).combobox("select", "");
 					}
 				}
  			}
  	    });
   	}

controller

@RequestMapping(value = "/getChannelCompanyName")
  @ResponseBody
  public List getChannelCompanyName(HttpServletRequest request) {
  //接收前台参数
    String inStr = "";
    ArrayList listRe = new ArrayList();
    try {
      inStr = URLDecoder.decode(URLDecoder.decode(request.getParameter("instr"), "UTF-8"), "UTF-8");
    } catch (Exception ex) {
    }
    //模糊查询出结果
    CorpQueryByNameRequest req = new CorpQueryByNameRequest();
    req.setCorpName(inStr);
    CorpListResponse resp = groupManagerServiceExport.getGroupByName(req);
    if(resp!=null){
    	 List list = resp.getInfos();
    	 //拼数据
    	    if (!ListMapUtil.isEmptyList(list)) {
    	      for (int i = 0; i < list.size(); i++) {
    	        CorpListInfoResponse corpListInfoResp = list.get(i);
    	        ChannelCompanyResponseVo channelCompanyResponseVo = new ChannelCompanyResponseVo();
    	        channelCompanyResponseVo.setChannelCompanyId(corpListInfoResp.getCorpId());
    	        channelCompanyResponseVo.setChannelCompanyName(corpListInfoResp.getCorpName());
    	    	listRe.add(channelCompanyResponseVo);
    	      }
    	    }
    }
   //返回数据
    return listRe;
  }

二、动态拼接下拉框

应用于 页面加载完毕后，通过点击按钮或某些交互，需要追加到页面新的数据。其中一些数据要显示到下拉选框，并在更改时，允许模糊匹配查找

html

js

//psgList为需要动态循环的行数据（其中包含需要显示在下拉选里的列，并支持模糊匹配修改）
///common/getCountryData.do 为获取数据的controller方法
 function updatePsgTbody(psgList,length){
	  $.each(psgList,function(i,psg){
	  //动态拼接处一个下拉选 并支持模糊匹配查询选择
	  var html = "
	    		   		  ""+
	    		   		  "";
 		var obj = $(html).appendTo("#passengerTbodyOrder");//追加到指定位置
	    	   
				$.parser.parse(obj);//动态渲染
				 $('#psgPaperCountry'+i).combobox('setValue',psg.psgPaperCountryVal );//赋值 为了显示出数据库查回来的数据
				  $('#psgPaperCountry'+i).combobox('setText', psg.psgPaperCountry); //赋值 为了显示出数据库查回来的数据
	   });
 });

controller

controller同上类似