基于JQuery和DWR实现异步数据传递

2023-07-13 23:25:04 213

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <% Stringpath=request.getContextPath(); StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "rel="externalnofollow"> 自动补全 varhighlightindex=-1;//高亮节点 vartimeOutId; $(document).ready(function(){ varwordInput=$("#keyText");//文本框值 varwordInputOffset=wordInput.offset();//文本框属性 //初始时层隐藏,并设置它的样式,位置 $("#auto").hide().css("border","1pxblacksolid") .css("position","absolute") .css("top",wordInputOffset.top+wordInput.height()+5+"px") .css("left",wordInputOffset.left+"px") .width(wordInput.width()+5); //文本框事件 $("#keyText").keyup(function(){ varmyEvent=event||window.event; varkeyCode=myEvent.keyCode;//取得按键的值 varautoNode=$("#auto"); //输入字母等的情况，包括回车，delete if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){ autoNode.html(""); varwordText=$("#keyText").val();//当前文本框值 if(wordText!=""){ //将上一次没有完成的请求清除 clearTimeout(timeOutId); //将请求延迟 timeOutId=setTimeout(function(){ //使用DWR返回数据，暂时没有设置参数，返回一个字符串数组即可 arr.backArr(functionback(data){ for(i=0;i").attr("id",i);//增加标识 newDiv.html(data[i]).appendTo(autoNode);//创建新的节点到原DIV元素 //鼠标移入事件 newDiv.mouseover(function(){ if(highlightindex!=-1){ $("#auto").children("div").eq(highlightindex) .css("background-color","white"); } //增加一个属性 highlightindex=$(this).attr("id"); //当前设为红色 $(this).css("background-color","red"); }); //鼠标移出事件 newDiv.mouseout(function(){ //当前清除颜色 $(this).css("background-color","white"); }); //鼠标单击事件 newDiv.click(function(){ //取出高亮节点的文本内容 varcomText=$("#auto").hide().children("div").eq(highlightindex).text(); highlightindex=-1; //文本框中的内容变成高亮节点的内容 $("#keyText").val(comText); }); } if(data.length>0){ autoNode.show(); }else{ autoNode.hide(); } }); },500);//延迟处理 }else{ autoNode.hide(); } highlightindex=-1; }elseif(keyCode==38||keyCode==40){ if(keyCode==38){//向上 varautoNodes=$("#auto").children("div") if(highlightindex!=-1){ //如果原来存在高亮节点，则将背景色改称白色 autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--; }else{ highlightindex=autoNodes.length-1; } if(highlightindex==-1){ //如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex=autoNodes.length-1; } //让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } if(keyCode==40){//向下 varautoNodes=$("#auto").children("div") if(highlightindex!=-1){ //如果原来存在高亮节点，则将背景色改称白色 autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex++; if(highlightindex==autoNodes.length){ //如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex=0; } //让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } }elseif(keyCode==13){ //下拉框有高亮内容 if(highlightindex!=-1){ //取出高亮节点的文本内容 varcomText=$("#auto").hide().children("div").eq(highlightindex).text(); highlightindex=-1; //文本框中的内容变成高亮节点的内容 $("#keyText").val(comText); }else{ //下拉框没有高亮内容 alert("文本框中的["+$("#keyText").val()+"]被提交了"); } } }); });

基于JQuery和DWR实现异步数据传递

热门推荐

随机推荐