jquery.autocomplete 實作實時查詢

之前做過一個autocomplete的例子，但是用的是從資料中把資料全部取出來，然後進行比對，如果取出的資料量比較少，用這個方法可以。但是如果資料量很大，則會造成響應速度很慢，是以還是弄了個實時的例子

頁面：

課程代碼：<input type="text"  name="qfkcdm" id="qfkcdm"/>
<input type="hidden" name="fkcdm" id="fkcdm"/>
           

首先是controller 層（比較菜，按道理這個層不應該寫過多的代碼）

public @ResponseBody Object kkkcAuto(HttpServletRequest request){
    	String aparam = request.getParameter("aparam");
    	List<ExamKkkc> kkkclist = this.examService.getAutoKkkc(aparam);
    	 String date="";
    	 String jsdata="";
		 if(kkkclist!=null&&kkkclist.size()>0){
		  for(int i=0;i<kkkclist.size();i++){
				 date+=",{'name':'"+kkkclist.get(i).getKcmc()+"', 'to':'"+kkkclist.get(i).getKcdm()+"'}";
			  }
		  jsdata  = "["+date.substring(1)+"]";
		  }
    	return jsdata;
    }
           

我這個地方根據前台穿過來的一個參數，在背景進行擷取list操作，擷取到資料後，進行拼串處理，處理過後傳到前台，這個時候傳的是String類型的。

$("#qfkcdm").autocomplete('<%=request.getContextPath() %>/manage/sys/exam/kkkcAuto.htm',{
  	    		minChars: 1,
  	        	max:10,//待定，顯示記錄數量
  	       		width: 200, 
  	        	matchContains: true,
  	        	autoFill: false,
  	        	//如果需要另外傳值給action的話可以用這樣的方式
  	         	extraParams:{   
  	         		aparam: function(){   
 	               		return $("#qfkcdm").val(); 
 					} 
  	       		}, 
  	       		//如果傳過來的不是對象類型，必須進行json轉化
                        parse: function(data) {
  	                return $.map(eval(data), function(row) {
  	                return {
  	                    data: row,
  	                    value: row.name,
  	                    result: row.to
  	                }
  	            })
  	            },
                    //如果在js中是通過對象的方式接受，用下面這種處理方式，待測試
                   /* parse: function(test){//進行對傳回資料的格式處理
  					//content為我action裡面定義的值
  	            	data = test;
  	              	var rows = [];
  	            	for(var i=0; i<data.length; i++){
  						var examkkkc = data[i];
  	                   	rows[rows.length] = {
  	                   	data:examkkkc.kcmc,
  	                   	value:examkkkc.to,
  	                   	result:examkkkc.kcmc
  	            		};
  	               	}   
  	            	
  	               	return rows;
  	    		}, */
  	    		formatItem: function(item) {
                      return "\"" + item.name + "\" [" + item.to + "]";
  	    			//return  "\""+ row.name + + "\" [" + row.to + "]";
                  },
                  formatMatch: function(row, i, max) {
                      return row.name + " " + row.to;
                  },
                  formatResult: function(row) {
                      return row.name;
                  }
              }).result(function(event,data,formatted){
  				$('#fkcdm').val(data.to);
  	     	});