`

jquery的suggest

jQueryCSSServletAjaxJSP 
阅读更多 
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

/**
 * 接收用户端请求
 */
public class AutoComplete extends HttpServlet{
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        //表示页面传过来的字符串，用于和服务器端的单词进行匹配
        String word = httpServletRequest.getParameter("word");
        //将字符串保存到request对象中
        httpServletRequest.setAttribute("word",word);
        //将请求转发给视图层(ajax中，这个所谓的视图层不是返回页面，只返回数据，所以可以称作数据层)
        httpServletRequest.getRequestDispatcher("wordxml.jsp")
                .forward(httpServletRequest, httpServletResponse);
    }

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
}



<!--与传统视图不同，这个jsp返回是xml数据-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<!--返回xml数据的视图层，暂时不做判断，将所有单词都返回-->
<%
    //页面传送参数
    String word = (String)request.getAttribute("word");
%>
<words>
    <%if("absolute".startsWith(word)){%>
        <word>absolute</word>
    <%}%>
    <%if("anyone".startsWith(word)){%>
        <word>anyone</word>
    <%}%>
    <%if("anything".startsWith(word)){%>
        <word>anything</word>
    <%}%>
    <%if("abandon".startsWith(word)){%>
        <word>abandon</word>
    <%}%>
    <%if("breach".startsWith(word)){%>
        <word>breach</word>
    <%}%>
    <%if("break".startsWith(word)){%>
        <word>break</word>
    <%}%>
    <%if("boolean".startsWith(word)){%>
        <word>boolean</word>
    <%}%>
</words>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>jquery示例:suggest</title>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/jqueryauto.js"></script>
</head>
<body>
    jquery示例:suggest<input type="text" id="word"/>
    <input type="button" value="提交"/><br/> <br/>
    <div id="auto"></div>
</body>
</html>


//表示当前高亮的节点
var highlightindex = -1;
var timoutId;
//自动补全框最开始应该隐藏
$(document).ready(function(){
    var wordInput = $("#word");
    var wordInputOffset = wordInput.offset();
    //自动补全框最开始应该隐藏起来
    $("#auto").hide().css("border","1px solid black").css("position","absolute")
            .css("top",wordInputOffset.top+wordInput.height()+5+"px")
            .css("left",wordInputOffset.left+"px").width(wordInput.width()+2);

    //给文本框添加键盘按下并弹起事件
    wordInput.keyup(function(event){
        //处理文本框中的键盘事件
        var myEvent = event||window.event;
        var keyCode = myEvent.keyCode;
        var autoNode = $("#auto");
        //如果输入的是字母，应该将文本框中的最新信息发送给服务器
        //如果输入的是退格或删除键，也将文本框的最新信息发送到服务器
        if(keyCode>=65 && keyCode<=90 ||keyCode==8 || keyCode==46){

            //1 首先获取文本框中的内容
            var wordText =$("#word").val();
            if(wordText!=""){

                //2 将文本框中的内容发送到服务器
                //对上次未完成的延时操作进行取消
                clearTimeout(timoutId);
                //对于服务器进行交互延迟500ms，避免打字过快造成不必要的压力
                timoutId = setTimeout(function(){
                    $.post("AutoComplete",{word:wordText},function(data){
                    //将dom对象data转换成jquery对象
                    var jqueryObj = $(data);
                    //找到所有word节点
                    var wordNodes = jqueryObj.find("word");
                    //遍历所有的word节点，取出单词内容，将单词内容添加到弹出框中

                    //将原先内容清空
                    autoNode.html("");
                    wordNodes.each(function(i){
                        //获取单词内容
                        var wordNode = $(this);
                        //新建div节点，将单词内容加入到新节点
                        //$("<div>").html(wordNode.text());
                        //将新建节点加入到弹出框的节点中
                        var newDivNode = $("<div>").attr("id",i);
                        newDivNode.html(wordNode.text()).appendTo(autoNode);
                        //增加鼠标进入事件，高亮节点
                        newDivNode.mouseover(function(){
                            //将原来高亮节点取消高亮
                            if(highlightindex !=-1){
                                $("#auto").children("div").eq(highlightindex)
                                        .css("background-color","white");
                            }
                            highlightindex = $(this).attr("id");
                            $(this).css("background-color","red");
                        });
                        //鼠标移出事件，取消当前节点的高亮
                        newDivNode.mouseout(function(){
                            //将原来高亮节点取消高亮
                            $(this).css("background-color","white");
                        });
                        //增加鼠标点击进行补全
                        newDivNode.click(function(){
                            //取出高亮节点的内容
                            var comText = $(this).text();
                            highlightindex = -1;
                            //文本框的内容变为高亮节点的内容
                            $("#word").val(comText);
                            autoNode.hide();
                        });

                        });
                        //如果服务器端有数据显示弹出框
                        if(wordNodes.length > 0){
                            autoNode.show();
                        }else{
                            autoNode.hide();
                            highlightindex = -1;
                        }
                    },"xml");
                },500);

            }else{
                autoNode.hide();
                highlightindex = -1;
            }
        }else if(keyCode ==38 || keyCode == 40){
            //如果输入的是向上38向下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){
                    //如果修改索引值后为-1,将索引值至为最后
                    highlightindex = autoNodes.length - 1;
                }
                //让高亮的内容至为红色
                autoNodes.eq(highlightindex).css("background-color","red");
            }else{
                //向下
                var autoNodes = $("#auto").children("div");
                if(highlightindex !=-1){
                    //原来存在高亮，变为白色
                    autoNodes.eq(highlightindex).css("background-color","white");
                }
                highlightindex++;
                if(highlightindex == autoNodes.length){
                    //如果修改索引值后为-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;
                //文本框的内容变为高亮节点的内容
                $("#word").val(comText);
            }else{
                //下拉框没有高亮内容
                alert("文本框中的["+$("#word").val()+"]被提交了");
                $("#auto").hide();
                //让文本框失去焦点
                $("#word").get(0).blur();
            }
        }
    });

    //给按钮添加事件，表示文本框的提交动作
    $("input[type='button']").click(function(){
        alert("文本框中的["+$("#word").val()+"]被提交了");
    });
});
分享到：
| jquery模拟股票信息实时显示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics