jsp自动完成下拉提示框

后台action的方法

public String getProductinfosToJson(){
 		String chars = ServletActionContext.getRequest().getParameter("chars");
 		Map<String,Object> map = new HashMap<String, Object>();
 		map.put("code", chars);
 		List list = manager.findProductinfosByMap(map);
 		return this.renderJsonList(list);
 	}

前台页面的关键代码

<input type="text" name="pcode" id="pcode"/>
<script language="js" type="text/javascript">
 					$("#pcode").coolautosuggest({
 						url:"productinfo!getProductinfosToJson.action?chars=",
 						showThumbnail:false,
 						showDescription:true,
 						//photopath:'${ctx}/upload/productinfo/',
 						onSelected:function(result){
 						  // Check if the result is not null
 						  if(result!=null){
 						    $("#pid").val(result.id); 
 						    $("#pname").val(result.name);
 						    $("#pcode").val(result.code);
 						    $("#pmoney").val(result.money);
 						   
 						   $("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/productinfo/" + result.photo );
 						  }
 						  else{
 						    $("#pid").val(""); 
 						    $("#pcode").val("");
 						    $("#pname").val(""); 
 						    $("#pmoney").val("");
 						    $("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
 						  }
 						}
 					});
 					function clearImg(){
 						 $("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
 					}
 					function addDetail(){
 						var pid=$("#pid").val();
 						if(pid==""||pid==null){
 							alert("请选择有效的商品，在进行添加！");
 							return false;
 						}
 						$.ajax({
 						  type: 'POST',
 						  url: "setmealProductinfo!save.action",
 						  dataType: "from",
 						  data:$("#inputForm").serialize(),//"inputForm";
 						  success: function(msg){
 						  	if(msg.length>0){
 						  		alert(msg);
 						  		$("#inputForm")[0].reset();
 						  		 $("#imgShowExpertPhoto2").attr('src',"${ctx}/upload/common/NoExpertPhoto.JPG");
 						  	}
 						  	else
 						   window.location.href="setmeal!view.action?id=${id}";
 						  }
 						});
 					}
 					function delSetmealProductinfo(id){
 						$.ajax({
 						  type: 'POST',
 						  url: "setmealProductinfo!delete.action?id="+id,
 						  success: function(){
 						   window.location.href="setmeal!view.action?id=${id}";
 						  }
 						});
 					}
 				</script>
 

我在1.2.0版本的jquery中加入了json的解析方法。（jquery.js）
附件中有我做的java例子和原来的Demo。
参考网址：http://www.open-lib.com/Type/159-1.jsp ，有大量好用的jquery控件
参考网址：http://wenku.baidu.com/view/b7dadf4fc850ad02de804184.html，将list转为json。

 

有图有真相