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

hil2000 贡献于2011-07-19

作者 howard  创建于2010-11-26 05:20:00   修改者howard  修改于2010-11-26 05:27:00字数2401

文档摘要:基于jquery的自动完成插件jquery.autocomplete项目需要一个自动完成功能的text,要求实时从服务端获取符合条件的数据。
关键词:

基于jquery的自动完成插件jquery.autocomplete 项目需要一个自动完成功能的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; } }); $("#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(); } } 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(); } }

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享文档获得金币 ] 6 人已下载

下载文档