jquery autocomplete 插件使用实例 （Struts2 ，result）

    首先要导入的 必要文件有：

    <script src="resources/common/js/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="resources/common/js/tips/jquery.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/common/js/jquery.autocomplete.css" />

 

    我这里是在Iterator迭代器中使用的自动完成功能，所以传回Action的值除了keyword外，还有另外一个参数。不过使用时搞清楚每一部分是干什么的，怎么用就可以了，有注释帮着理解么，直接上代码哦。比较重要的地方就是，data，value，result 这三者分别的作用，还有就是最后的result函数触发，就是当选择了某一项后，需要将选择项的相关内容放到其他的控件里面等。fomatted就是对应上面的 value值的，这点搞清楚了，应用起来就方便了。eval()函数将对象转换为 js对象。

     ImageCustomDimension!getTips.action  在struts中将这个action配置为返回json字符串。配置部分如下：

    <result name="getKeyWordTips" type="json">
            <param name="root">tipStr</param>
    </result>

 

Action中的部分： private String tipStr; public String getTipStr() { return tipStr; } public void setTipStr(String tipStr) { this.tipStr = tipStr; } public String getTips() { //获取提示，用逗号分割开 String[] myKeywors = keyword.split(","); List<TagStandardBrief> tipsList= this.tagStandardService.getSimilarTagByWord(myKeywors[0],Integer.parseInt(myKeywors[1])); Map<String,List<TagStandardBrief>> map=new HashMap<String, List<TagStandardBrief>>(); List<TagStandardBrief> nullList = null; if(tipsList != null && tipsList.size()>0) { map.put("tips", tipsList); } else { map.put("tips", nullList); } JSONObject jsonObject = JSONObject.fromObject(map); this.tipStr = jsonObject.toString(); //返回JSON数组 return "getKeyWordTips"; }

 

前端页面部分，放在$(document).ready(function() {});里面

 

 

$(".SugggestBox").each(function(){ var aeraobj = $(this); $(this).autocomplete("ImageCustomDimension!getTips.action", { minChars: 1, max:10, width: 150, matchContains: true, dataType:'json', //如果需要另外传值给action的话可以用这样的方式,如果只是把input里面的值传递给action的话,可以不写 //keyword 为请求参数名 extraParams: { keyword: function() { var idInput = aeraobj[0].id; var dimensionId = idInput.substr(0,idInput.length-5); return aeraobj[0].value+","+dimensionId; } }, //进行对返回数据的格式处理 parse: function(data) { //tips为我action里面定义的值 var obje = eval('(' + data + ')'); if(obje.tips != ""){data=obje.tips;} var rows = []; for(var i=0; i<data.length; i++) { rows[rows.length] = { //提示显示内容选择 data:data[i].name+"-"+data[i].groupName, //formatItem修饰过的内容 ，就是item的值 value:data[i].id, //result里面显示的是要返回到列表里面的值 result:data[i].name+"#"+data[i].code }; } return rows; }, formatItem:function(item) { //这里的Item实质上是 parse function中的value的值，即选中项的 data[i].id。 return item; } } ).result(function(event,data,formatted){ if(data==null){ return false; } var id = aeraobj[0].id; var dimensionId = id.substr(0,id.length-5); var tagIds = $("#"+dimensionId).next().val(); if (tagIds == ""){ $("#"+dimensionId).next().val(formatted); }else{ $("#"+dimensionId).next().val(tagids+","+formatted); } }); });