jquery如下:
$('#branch').autocomplete('<%=root%>/transfer_autoGetInfo.action', {//后台的地址 extraParams: { provCd: function(){ return $("#province").val();}//往后台传递非当前文本框的其他参数需要这样处理,例如我要向后台传递name为provCd的参数,province为某个文本框的id,多个参数使用逗号分开 }, max: 6, //提示列表里的条目数 minChars: 0, //自动完成激活之前填入的最小字符 width: 300, //提示的宽度,溢出隐藏 scrollHeight: 300, //提示的高度,溢出显示滚动条 matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示 autoFill: false, //自动填充 parse: function(data) {//有点类似于ajax的方式 return $.map(eval(data), function(row) { return { data: row, value: row.pmsBankNm,//pmsBankNm为后台返回给前台的值,也是要提示的信息 result: row.pmsBankNm }; }); }, formatItem: function(row, i, max) { return row.pmsBankNm; }, formatMatch: function(row, i, max) { return row.pmsBankNm +row.pmsBankNm; }, formatResult: function(row) { return row.pmsBankNm; } }); });
文本框如下所示:
<input id="branch" name="branch" style="">
后台代码如下所示:
String obj = ServletActionContext.getRequest().getParameter("q");//当前文本框的输入的值 //在这里获得你在autocomplete中传向后台的其他参数,用于匹配准准确的提示信息 //例如,我发的那个提示支行信息的例子,不仅需要向后台传递支行信息文本框用户输入的信息,还需要向后台传递省份,城市等信息来匹配数据 //可以用contains等方法来匹配信息 JSONArray json = JSONArray.fromObject(tpmsBankInfs);//tpmsBankInfs为你获得的提示性信息 ResponseHandler.resWithJson(ServletActionContext.getResponse(), json.toString());
先放几张之前工作时做的东西:
示例1:
示例2:
如果要修改提示框的样式以及提示框的字体等可以修改附件中的css文件
实现该功能的css以及js如附件