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

[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
    评论
可以使用JavaScript来实现在文本框输入身份证号码后自动获取出生日期。具体实现步骤如下: 1. 在HTML中添加一个文本框和一个按钮。 ```html <input type="text" id="idcard" placeholder="请输入身份证号码"> <button onclick="getBirthday()">获取出生日期</button> ``` 2. 在JavaScript中编写函数getBirthday(),用于获取身份证号码并计算出生日期。函数实现如下: ```javascript function getBirthday() { // 获取身份证号码 var idcard = document.getElementById("idcard").value; // 身份证号码正则表达式 var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (reg.test(idcard) === false) { alert("身份证号码格式不正确"); return false; } // 根据身份证号码计算出生日期 var birthday; if (idcard.length === 15) { birthday = "19" + idcard.substr(6, 2) + "-" + idcard.substr(8, 2) + "-" + idcard.substr(10, 2); } else if (idcard.length === 18) { birthday = idcard.substr(6, 4) + "-" + idcard.substr(10, 2) + "-" + idcard.substr(12, 2); } // 显示出生日期 alert("出生日期为:" + birthday); } ``` 3. 在页面加载完成后,为文本框添加按键事件,当用户按下“Enter”键时,自动调用getBirthday()函数。 ```javascript window.onload = function() { var idcard = document.getElementById("idcard"); idcard.addEventListener("keydown", function(event) { if (event.keyCode === 13) { event.preventDefault(); getBirthday(); } }); } ``` 这样,当用户在文本框输入身份证号码后,点击按钮或按下“Enter”键,就可以自动获取出生日期了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值