springmvc+ajax 实现jquer autocomplete 联想查询(动态添加、删除行)

	//本文章实现多个input联想查询，如果需要单个联想查询，可参考网址：http://www.runoob.com/jqueryui/example-autocomplete.html
	
	
	var par=0;
	//用于接收联合查询集合
	var aResult = [
	    		   /* {
	    		    label: "jQuery",
	    		    desc: "the write less, do more, JavaScript library",
	    		  },
	    		  {
	    		    label: "jQuery UI",
	    		    desc: "the official user interface library for jQuery",
	    		  },
	    		  {
	    		    label: "Sizzle JS",
	    		    desc: "a pure-JavaScript CSS selector engine",
	    		  } */
	    		];
	//参数：inputparametername 联想查询输入框name;url 服务器请求地址;showname 选择数据后需要赋值的name;param 服务器请求参数
	function autosearch(inputparametername,showname,url,param) {
		$("[name="+inputparametername+"]").each(function(){ 
			$(this).on('click',function(){
				//获取当前input的索引
				//用于存放从后台接收到的匹配结果  
				if(par==0){
					$.ajax({
						type : 'post',
						//data 传入查询参数
						data : JSON.stringify({
							sku : $("#"+param+"").val()
						}), //获取到id为patientName的输入框的值，通过ajax传到后台
						url : url, //后台获取数据的url
						contentType : 'application/json',
						success : function(data) {
							if (data == "error" || data == null || data == "") {
								alert("errer");
							}
							par=1;
							//将后台返回的值遍历存入aResult集合
							//data.autolist  、data.showlist是后台返回的list集合,autolist是联想查询结果,showlist是赋值list
							$.each(data.autolist, function(index, value) {
								aResult.push({
									//label desc 为aResult自定义字段
									label : value,
									desc : data.showlist[index],
								});
							});
						}
					});
					}
				//获取当前input的索引，根据索引再赋值给name
				var index = $("[name="+inputparametername+"]").index(this);
				//为select赋值
				$(this).autocomplete({
					source : aResult,
					select : function(event, ui) {
						$("[name="+showname+"]:eq("+index+")").val(ui.item.desc);
						$("[name="+inputparametername+"]:eq("+index+")").val(ui.item.label);
					}
				}).data("ui-autocomplete")._renderItem = function(ul, item) {
					return $("
").append(
							"" + item.label + "
" + item.desc + "")
							.appendTo(ul);
				};
			}); 
			}); 
	}//引入css与js文件
 rel="stylesheet" href="/css/autocomplete/jquery-ui.min.css">
<script src="/js/autocomplete/query.min.js"></script>
<script src="/js/autocomplete/jquery-ui.min.js"></script>
<script src="/js/kote/autocomplete.js"></script>
js与css下载地址：http://download.csdn.net/detail/luoxiabo_showsup/9648253
//调用autosearch方法

// 产品联想查询
	@PreAuthorize("hasAuthority('USER')")
	@ResponseBody
	@RequestMapping(value = "/user/product/likeproduct", method = RequestMethod.POST)
	public Map
     
     
      
       likeproduct(@RequestBody Product data) {
		// 返回数据的Map集合
		Map
      
      
       
        result = new HashMap
       
       
        
        ();
		Product selp = new Product();
		selp.setSku(data.getSku());
		List
        
        
          productlist = productService.findProductSku(selp); // 返回请求的结果 List 
         
           strlist=new ArrayList 
          
            (); List 
           
             str2list=new ArrayList 
            
              (); if(productlist!=null &&productlist.size()>0){ for(Product p:productlist){ strlist.add(p.getSku()); str2list.add(p.getName()); System.out.println(p.getSku()+"-------"+p.getName()); } } System.out.println(productlist.size()); result.put("autolist",strlist); result.put("showlist",str2list); return result; } 
              
             
 select from product where 1=1 
                
            
 
            
           
          
        
       
       
      
      
     
     

图片附件是实现效果图： 输入产品编码，联想出产品名称