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

Jz_lvcha

浏览: 22489 次
性别:
来自: 长沙

最近访客更多访客>>

binashen

suidl

sn200837

neeleon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

Jquery

json jquery java

//页面代码，使用的是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" onkeyup="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>