效果如图:
实现原理:$.post()实现前台与后台的数据传输。
js代码:
<script type="text/javascript">
//设置文本框的内容
function setContent(con,index){
var context=con.eq(index).text();
$("#content").val(context);
}
//设置背景颜色
function setBkColor(con,index,color){
con.eq(index).css("background-color",color);
}
$(document).ready(
function(){
//获得输入框节点
var inputItem=$("#content");
var inputOffset=inputItem.offset();
var autonode=$("#auto");
//设置提示框隐藏
autonode.hide().css("border","1px black solid").css("position","absolute")
.css("top",inputOffset.top+inputItem.height()+5+"px")
.css("left",inputOffset.left+"px").width(inputItem.width()+"px");
//当键盘抬起时触发事件执行访问服务器业务
$("#content").keyup(
function(event){
var myevent=event||window.event;
var mykeyCode=myevent.keyCode;
//字母,退格,删除,空格
if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){
//清除上一次的内容
autonode.html(" ");
//获得文本框内容
var word=$("#content").val();
var timeDelay;
if(word!=""){
//取消上次提交
window.clearTimeout(timeDelay);
//延迟提交,这边设置的为400ms
timeDelay=window.setTimeout(
//将文本框的内容发到服务器
$.post("accountsJson!getAccountCode.action",{id:word},
function(data){
var dataObj=eval("("+data+")");
$.each(dataObj,function(idx,obj){
var newNode=$("<div>").html(obj).attr("id",idx).addClass("pro");
//将返回内容附加到页面
newNode.appendTo(autonode);
//处理鼠标事件
var con=$("#auto").children("div");
//鼠标经过
newNode.mouseover(
function(){
if(highlightindex!=-1){
setBkColor(con,highlightindex,"white");
}
highlightindex=$(this).attr("id");
$(this).css("background-color","#ADD8E6");
setContent(con,highlightindex);
}
);
//鼠标离开
newNode.mouseout(
function(){
$(this).css("background-color","white");
}
);
//鼠标点击
newNode.click(
function(){
setContent(con,highlightindex);
highlightindex=-1;
autonode.hide();
}
);
});
//当返回的数据长度大于0才显示
if(dataObj.length>0){
autonode.show();
}else{
autonode.hide();
}
})//post
,400);//settimeout
}else{
autonode.hide();
highlightindex=-1;
}
}else{
//获得返回框中的值
var rvalue=$("#auto").children("div");
//上下键
if(mykeyCode==38||mykeyCode==40){
//向上
if(mykeyCode==38){
if(highlightindex!=-1){
setBkColor(rvalue,highlightindex,"white");
highlightindex--;
}
if(highlightindex==-1){
setBkColor(rvalue,highlightindex,"white");
highlightindex=rvalue.length-1;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
//向下
if(mykeyCode==40){
if(highlightindex!=rvalue.length){
setBkColor(rvalue,highlightindex,"white");
highlightindex++;
}
if(highlightindex==rvalue.length){
setBkColor(rvalue,highlightindex,"white");
highlightindex=0;
}
setBkColor(rvalue,highlightindex,"#ADD8E6");
setContent(rvalue,highlightindex);
}
}
//回车键
if(mykeyCode==13){
if(highlightindex!=-1){
setContent(rvalue,highlightindex);
highlightindex=-1;
autonode.hide();
}else{
alert($("#content").val());
}
}
}
}
);//键盘抬起
//当文本框失去焦点时的做法
inputItem.focusout(
function(){
//隐藏提示框
autonode.hide();
}
);
}
);//reday
</script>
jsp代码:
<td>账户编号 :</td><td><input type = "text" id="content" name = "accounts.accountsCode"/><div id="auto"></div></td>
java代码:
/**
* 模糊查询
* */
public String getAccountCode(){
List<String> codeList = accountsService.getAccountCode(id);
JSONArray jsonArray = JSONArray.fromObject(codeList);
message = jsonArray.toString();
return SUCCESS;
}
struts2配置文件内容:
<package name="accountsJson" extends="json-default">
<action name="accountsJson" class="com.zh.logistics.action.AccountsAction">
<result type="json">
<param name="root">message</param>
</result>
</action>
</package>
- 大小: 11.4 KB
分享到:
相关推荐
我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。 博客地址:http://blog.csdn.net/sdksdk0/article/details/51755489
使用ajax+struts2.0+jsp做的一个多下拉列表级联
Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单
精通Java Web整合开发(Jsp+Ajax+Struts+Hibernate)(第2版) Java Structs2.1 Spring3.0 Hibernate3.3 PDF有231M,只能分成4个包上传。 虽然是图片的,但绝对清晰完整,可以放心下载。 前面已经上传过,但第一个包忘...
关键代码都在里面 资源是工程中的一部分 暂不能运行 原来用的是Java实现Json串 考虑到频繁访问数据库 就改成了存储过程
MVC Struts2框架搭建,Jquery Ajax异步数据交互,内涵需要的jar包及ppt讲解
Java+Ajax+struts2的web网页聊天 Java+Ajax+struts2的web网页聊天 Java+Ajax+struts2的web网页聊天
ajax+json+Struts2实现list传递实例讲解.docx
Ajax+Struts应用(完整源码) Ajax+Struts应用(完整源码) Ajax+Struts应用(完整源码)
本程序是自己在工作过程中遇到的一个问题,自己通过查看资料,学习。终于自己实现了Ajax+Struts+HIbernate省市联动效果。里面有数据库文件,直接导入到Myeclipse即可运行。
里面包括用户名验证和用户验证码生成两部分.注意STRUTS-CONFIG.XML
Ajax+Struts使用Json数据心得Ajax+Struts使用Json数据心得Ajax+Struts使用Json数据心得Ajax+Struts使用Json数据心得
Java Structs2.1 Spring3.0 Hibernate3.3 CSDN上没看到有人上传过,在别的地方找的,分享一下 part2/4,刚才上传后好像不成功,重新上传一下
用php+ajax写的仿百度谷歌搜索下拉自动提示框效果
【资源介绍】:Ajax+Struts+hibernate二级联动查询(完整源码例子) 【备注】: 亲爱的下载用户: 谢谢您光临CSDN阿Q资源中心! 本中心发布的资源均是经过本人测试通过后才发布的,请放心下载。如果您有不...
spring+struts2+hibernate+ajax+jfreechart 广告管理系统 带数据库 有十几张表 很有实战意义
本人最近写的一个ajax+struts分页
用案例学Java Web整合开发:Java+Eclipse+Struts 2+Ajax
json+struts2实现Ajax 新手入门的例子
struts2+ajax+easyui+json+datagrid增,删,改,查,分页,排序,有数据库