文本框输入关键字自动提示相近信息

[size=large][color=red][b]就好像百度搜索框那样,根据文本框输入的信息提示你想要的搜索关键字[/b][/color][/size]


[color=darkblue][b]jquery如下[/b]:[/color]

$('#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;
}
});
});


[color=blue][b]文本框如下所示:[/b][/color]

<input id="branch" name="branch" style="">

[color=blue][b]后台代码如下所示:[/b][/color]



String obj = ServletActionContext.getRequest().getParameter("q");//当前文本框的输入的值
//在这里获得你在autocomplete中传向后台的其他参数,用于匹配准准确的提示信息
//例如,我发的那个提示支行信息的例子,不仅需要向后台传递支行信息文本框用户输入的信息,还需要向后台传递省份,城市等信息来匹配数据
//可以用contains等方法来匹配信息
JSONArray json = JSONArray.fromObject(tpmsBankInfs);//tpmsBankInfs为你获得的提示性信息
ResponseHandler.resWithJson(ServletActionContext.getResponse(),
json.toString());


[color=darkblue][b]
先放几张之前工作时做的东西[/b]:[/color]
[color=blue][b]示例1:[/b][/color]
[img]http://dl.iteye.com/upload/picture/pic/136141/5abcf3ce-b20c-3b35-bd88-499de4a0c723.png[/img]
[color=blue][b]示例2:[/b][/color]
[img]http://dl.iteye.com/upload/picture/pic/136139/2e82c6fb-b95c-3028-a7c2-830d494ccbde.png[/img]


[size=large]
[color=darkred]如果要修改提示框的样式以及提示框的字体等可以修改附件中的css文件
实现该功能的css以及js如附件[/color][/size]
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值