jquery autoComplete 在实际项目的运用

 1、在使用该插件前先在页面引入以下js文件：

<script type="text/javascript" src="${basePath}ps/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/thickbox-compressed.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.autocomplete.js"></script>

 引入以下css文件：

<link rel="stylesheet" href="${basePath}js/autocomplete/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="${basePath}js/autocomplete/thickbox.css" type="text/css" />

 

2、页面js关键代码：

$().ready(function() {
		    $("#nameKey").autocomplete("${basePath}/search/productAutoComplete.action", {   
				   multiple: false,     
				   width:150,     
				   max:50,     
				   multipleSeparator: '',    
				   dataType: 'json',     
				  //加入对返回的json对象进行解析函数，函数返回一个数组       
				   parse: function(data) {   
				     var rows = [];   
				     for(var i=0; i<data.length; i++){ 
				      rows[rows.length] = {    
				        data:data[i].productName,    
				        value:data[i].productName,    
				        result:data[i].productName    
				        };    
				      }   
				   return rows;   
				     },   
				   formatItem: function(row, i, n) {   
				      return row;         
				  }   
			});  
		});

 解析： 1、nameKey对应的是页面上input的id,如下：

<input type="text" value="${nameKey}" id="nameKey" name="nameKey" class="mainkey" title="产品关键字"/>

 

2、向后台获取的是一个json格式的数据，后台处理关键代码如下：

public String productAutoComplete() throws Exception{
		 super.getResponse().setCharacterEncoding("utf-8");
		  super.getResponse().setContentType("text/html; charset=utf-8");
		  PrintWriter out = super.getResponse().getWriter();  
		  nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");
		  List<ProductInfo> results=super.productInfoService.findAllNeedProductInfo(nameKey, 0, 10);
		  List<ProductAutoView>  pavList = new ArrayList<ProductAutoView>();
		  for(ProductInfo pi : results){
			  pavList.add(new ProductAutoView(pi.getName()));
		  }
		  JSONArray jsonArray = JSONArray.fromObject(pavList); 
		  out.print(jsonArray.toString());   
		  out.flush();   
		  out.close();   
		return null;
	}

 注意： 页面传过来的参数名默认是"q",为了防止中文乱码，还要对数据进行转码，如下：

nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");

 

3、当输入功能时，返回给客户端的数据如下：

[{"productName":"未分类-未分类笔记本包-劲量多功能充 XP1000"},{"productName":"多功能一体机-惠普-HP Deskjet B209a 多功能一体机"},{"productName":"多功能一体机-惠普-HP 2488 喷墨一体机"},{"productName":"多功能一体机-惠普-HP J4660喷墨一体机"},{"productName":"多功能一体机-惠普-HP OJ J3606 CN552A 多功能传真一体机"},{"productName":"多功能一体机-惠普-HP OJ 4500 CM754A desktop 彩色传真一体机(标准版)"},{"productName":"办公用品-齐心文具-A615  多功能票夹"},{"productName":"多功能一体机-惠普-HP 4308喷墨一体机"},{"productName":"多功能一体机-爱普生-EPSON ME330 喷墨一体机"},{"productName":"IP09-AMB-4001A 多功能鼠标垫"}]

4、页面体现如下：