基于jquery的自动完成插件jquery.autocomplete.js

项目需要一个自动完成功能的text，要求实时从服务端获取符合条件的数据。

想到jquery貌似有类似功能的插件：

1.需要下面几个文件：jquery-1.3.2.js，jquery.autocomplete.js，jquery.autocomplete.css。

2.功能要求：随着输入的内容不同不断匹配符合条件的数据项，这就要求动态获取参数。而jquery传递参数可以用：

extraParams: {area:function(){return $('#id').val();}}

不过经过使用发现，这样不能动态获取参数，所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性：

(1) 为$.Autocompleter.defaults添加一个属性：onBegin: null,大约在400行；

(2)调用方法:

$("#id").autocomplete(url, { mustMatch: false, //是否完全匹配 width: 220, //宽度 max: 10, //最大显示行数 onBegin: function(options) { var va= $("#id").val(); if (va&& va!= "") options.extraParams.va=va; return options; }, parse: function(data) { var par=eval(data); var re=[]; if(par!=null&&par!='undfined'){ for(var i=0;i<par.length;i++){ re[i]={data:par[i],value:par[i],result:par[i]};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。 } return re; }else{ return []; } }, formatItem: function(item) { return item; } });

(3)后台方法:

public void ajaxQuery(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { String va= request.getParameter("va"); //长度超过5位开始查询 if (va!= null && va.length() >= 5) { response.setContentType("text/html; charset=GBK"); PrintWriter out = response.getWriter(); List list = queryService.ajaxQuery(va); String retValue = "["; for (int i = 0; i < list.size(); i++) { retValue += retValue.length() > 1 ? ",'" + list.get(i) + "'": "'" + list.get(i) + "'"; } if (retValue.length() > 1) { out.print(retValue + "]"); } out.flush(); out.close(); } }