Ajax自动补全数字账号，并且数字验证。

最新推荐文章于 2021-05-31 01:07:38 发布

Jz_lvcha

最新推荐文章于 2021-05-31 01:07:38 发布

阅读量177

点赞数

分类专栏： Jquery 文章标签： json jquery java ViewUI

本文链接：https://blog.csdn.net/Jz_lvcha/article/details/84252869

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//页面代码，使用的是Java 后台交互

<html>
<head>
<title>自动补全测试</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/auto/auto.js"></script>
<style type="text/css">
body {font-family: Arial,Helvetica,sans-serif; font-size: 12px; padding:0px; margin: 5px; }
form {padding: 0px; margin: 0px;}
input {font-family: Arial,Helvetica,sans-serif; font-size: 12px; border: 1px solid #000; width:200px; padding: 1px; margin: 0px; }
#popup {position: absolute; width:202px; color:#004a7e; font-size: 12px; font-family: Arial,Helvetica,sans-serif; left: 41px; top: 25px; }
#popup.show {border: 1px solid #004a7e; }
ul{list-style: none; margin: 0px; padding: 0px; color: #004a7e; }
li.mouseOver { background-color: #004a7e; color: #fff; }
</style>
<script type="text/javascript">
var oInputField;
var oPopDiv;
var oColorsUI;
function initVars() {
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUI = $("#colors_ul");
}

function clearColors() {
oColorsUI.empty();
oPopDiv.removeClass("show");
}

function setColors(the_colors) {
clearColors();
oPopDiv.addClass("show");
for (var i = 0; i < the_colors.length; i++) {
oColorsUI.append($("<li>" + the_colors[i] + "</li>"));
}
oColorsUI.find("li").click(function() {
oInputField.val($(this).text());
clearColors();
}).hover(function() {
$(this).addClass("mouseOver");
},
function() {
$(this).removeClass("mouseOver");
});
}

function findColors() {
initVars();
if (oInputField.val().length > 0) {
$.get("auto.htm?actionMethod=onLinkClick", {
sColor: oInputField.val()
},
function(data) {
var aResult = new Array();
if (data.length > 0) {
for(i=0;i<data.length;i++){
aResult.push(data[i].accountNumber);
}
setColors(aResult);
} else clearColors();
});
} else clearColors();
}
</script>

</head>
<body>
<form id="form1" method="post" name="myForm1">
AccountName:
<input type="text" name="colors" id="colors" οnkeyup="if(this.value=this.value.replace(/\D/g,'')){findColors()}else{alert('只能输入数字')}" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
</form>
<div id="popup">
<ul id="colors_ul">
</ul>
</div>
</body>
</html>

//Java后台代码，业务层
public AjaxResult onLinkClick() {

String accountNum = this.getContext().getRequestParameter("sColor");
List<Account> accountList = accountService.findAll(accountNum);
AjaxResult ajaxResult = new AjaxResult();
JsonUtil json = new JsonUtil();
String src = json.list2json(accountList);
ajaxResult.setContent(src);
ajaxResult.setCharacterEncoding("UTF-8");
ajaxResult.setContentType(AjaxResult.JSON);
return ajaxResult;
}
//服务层和接口实现
public interface AccountService {
public List<Account> findAll(String accountNum);

}

public List findAll(String accountNum){
accountNum = accountNum+"%";
return this.sqlSessionTemplate.selectList("account.findAll",accountNum);
}

//数据持久层DAO
<select id="findAll" parameterType="String" resultType="com.talkyun.model.Account">
select * from account
<where>
<if test="null!=_parameter and ''!=_parameter">
accountnumber like #{_parameter}
</if>
</where>

</select>
[img]http://dl.iteye.com/upload/attachment/0070/9932/64476761-7237-3ee7-9761-b011dfdb9fdc.jpg[/img]

Jz_lvcha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax自动补全数字账号，并且数字验证。

//页面代码，使用的是Java 后台交互自动补全测试 body {font-family: Arial,Helvetica,sans-serif; font-size: 12px; padding:0px; margin: 5px; } form {padding: 0px; margin: 0px;} in...
复制链接

扫一扫