基于JQuery和DWR的自动补全

最新推荐文章于 2017-03-20 10:39:15 发布

Jlins

最新推荐文章于 2017-03-20 10:39:15 发布

阅读量1.2k

点赞数

分类专栏： java教程文章标签： dwr jquery function div border string

本文链接：https://blog.csdn.net/dyllove98/article/details/7720059

版权

java教程专栏收录该内容

71 篇文章 1 订阅

订阅专栏

后台我用DWR进行异步数据传递：

代码很简单，就是返回一个数组，如果需求不同可以自己修改：

    Java代码  
     
    
  
package org.dwr.re;  
/** 
 * 测试 返回数组 
 * @author 崔素强 
 */  
public class BackArray {  
    public String[] backArr() {  
        String[] arr = new String[] { "坚持", "就是", "胜利" };  
        return arr;  
    }  
}  

前台记得导入DWR的JS，和JQuery的JS，然后写文本框的输入事件：

    Html代码  
     
    
  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">      
    <title>自动补全</title>  
    <script type='text/javascript' src='/buquan/dwr/util.js'></script>  
    <script type='text/javascript' src='/buquan/dwr/engine.js'></script>  
    <script type='text/javascript' src='/buquan/dwr/interface/arr.js'></script>  
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
    <script type="text/javascript">         
    var highlightindex = -1; //高亮节点  
    var timeOutId;  
    $(document).ready(function() {    
    var wordInput = $("#keyText"); //文本框值     
    var wordInputwordInputOffset = wordInput.offset(); //文本框属性  
    //初始时层隐藏,并设置它的样式,位置  
    $("#auto").hide().css("border","1px black solid")  
        .css("position","absolute")  
        .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")  
        .css("left",wordInputOffset.left + "px")  
        .width(wordInput.width() + 5);      
    //文本框事件  
    $("#keyText").keyup(function(){  
        var myEvent = event || window.event;  
        var keyCode = myEvent.keyCode; //取得按键的值  
        var autoNode = $("#auto");  
        //输入字母等的情况，包括回车，delete  
        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {  
            autoNode.html("");            
            var wordText=$("#keyText").val(); //当前文本框值  
            if (wordText != ""){  
                //将上一次没有完成的请求清除  
                clearTimeout(timeOutId);  
                //将请求延迟  
                timeOutId = setTimeout(function(){  
                    //使用DWR返回数据，暂时没有设置参数，返回一个字符串数组即可  
                    arr.backArr(function back(data){  
                        for(i = 0;i < data.length;i++){    
                            var newDiv = $("<div>").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(){  
                                //取出高亮节点的文本内容  
                                var comText = $("#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;  
        } else if (keyCode == 38 || keyCode == 40) {  
            if (keyCode == 38) { //向上                  
                var autoNodes = $("#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) { //向下                  
                var autoNodes = $("#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");  
            }  
        } else if (keyCode == 13) {  
             //下拉框有高亮内容  
            if (highlightindex != -1) {  
                //取出高亮节点的文本内容  
                var comText = $("#auto").hide().children("div").eq(highlightindex).text();  
                highlightindex = -1;  
                //文本框中的内容变成高亮节点的内容  
                $("#keyText").val(comText);  
            } else {  
                //下拉框没有高亮内容  
                alert("文本框中的[" + $("#keyText").val() + "]被提交了");  
            }  
        }  
    });  
    });  
    </script>   
  </head>    
  <body>  
    <input type="text" id="keyText" name="keyText" width="50px" />  
    <div id="auto" align="left"></div>  
  </body>  
</html>  

当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！

转自-http://cuisuqiang.iteye.com/blog/1541423<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>