var highlightindex = -1;
var settimeId;
$(document).ready(function() {

    var wordInput = $("#TxtKeyword");
    var wordInputOffset = wordInput.offset();
    //自动补全框最开始应该隐藏起来
    $("#auto").hide().css("border", "1px black solid").css("position", "absolute")
            .css("z-index","1")
            .css("background-color","white")
            .css("top", wordInputOffset.top + wordInput.height() + 4 + "px")
            .css("left", wordInputOffset.left - 2 + "px").width(wordInput.width() + 6);

    //给文本框添加键盘按下并弹起事件
    $("#TxtKeyword").keyup(function(event) {
        //处理文本框的键盘事件
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的是字母，应该将文本框中最新的信息发送个服务器
        //如果输入的是退格键，也应该将文本框中的最新信息发送个服务器
        if (keyCode >= 65 && keyCode <= 90 || keyCode >=48 && keyCode <=57  || keyCode == 8 || keyCode == 46) {
            //1、首先获取文本框中的内容
            var wordText = $("#TxtKeyword").val();
            var autoNode = $("#auto");
            if (wordText != "") {
                //2、将文本框中的内容发送给服务器段第一个参数是提交的Url地址，第二个参数是提交的内容，第三个参数是回调函数，第四个参数是返回数据类型这里是xml格式的
                //对上次未完成的延迟操作进行取消
                clearTimeout(settimeId);
                //对于服务器端进行交互延迟500毫秒，避免快速打字造成的频繁请求
                settimeId = setTimeout(function() {

                    $.ajax({
                        type: "POST",
                        url: "AutoComplete.aspx",

                        data: "word=" + wordText,
                        success: function(data) {
                            //将dom对象data转换成Jquery对象
                            //alert(data);
                            var jqueryObj = $(data);

                            //找到所有word节点
                            var wordNodes = jqueryObj.find("word");
                            //遍历所有的word节点，取出单词的内容，然后将单词内容添加到文本框中

                            //需要清空原来的内容
                            autoNode.html("");
                            wordNodes.each(function(i) {
                                //获取单词内容
                                var wordNode = $(this);
                                //新建div节点，将单词内容加入到新建的节点中
                                //将新建的节点加入到弹出框的节点中
                                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", "#66cc66");
                                });
                                //增加鼠标移出事件
                                newDivNode.mouseout(function() {
                                    //取消鼠标移出节点的高亮
                                    $(this).css("background-color", "white");
                                });
                                //增加鼠标点击事件，可以进行补全
                                newDivNode.click(function() {
                                    //取出高亮节点的文本内容
                                    var comText = $(this).text();
                                    highlightindex = -1;
                                    //文本框中的内容变成高亮节点的内容
                                    $("#TxtKeyword").val(comText);
                                    $("#auto").hide();
                                });

                            })
                            //如果服务器有数据返回，则显示弹出框
                            if (wordNodes.length > 0) {
                                autoNode.show();
                            } else {
                                autoNode.hide();
                                //弹出框隐藏的时候，高亮节点的索引值给他变成-1
                                highlightindex = -1;
                            }
                        }
                    });

                }, 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", "#66CC66");
                
                if (highlightindex != -1) {
                    //取出高亮节点的文本内容
                    var comText = $("#auto").children("div").eq(highlightindex).text();
                  
                    //文本框中的内容变成高亮节点的内容
                    $("#TxtKeyword").val(comText);
                }
            }
            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", "#66CC66");
                
                if (highlightindex != -1) {
                    //取出高亮节点的文本内容
                    var comText = $("#auto").children("div").eq(highlightindex).text();
                  
                    //文本框中的内容变成高亮节点的内容
                    $("#TxtKeyword").val(comText);
                }
            }
        } else if (keyCode == 13) {
            //如果按下的是回车
            //下拉框中的内容高亮显示
            //下拉框有高亮内容
            if (highlightindex != -1) {
                //取出高亮节点的文本内容
                var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                highlightindex = -1;
                //文本框中的内容变成高亮节点的内容
                $("#TxtKeyword").val(comText);
            } else {
                //下拉框没有高亮内容
//                alert("文本框中的[" + $("#word").val() + "]被提交了");
                $("#auto").hide();
                //让文本框失去焦点
                $("#TxtKeyword").get(0).blur();
            }
        }
    })

    //给按钮添加事件表示文本框中的数据被提交了
//    $("input[type='button']").click(function() {
//        alert("文本框中的【" + $("#TxtKeyword").val() + "】被提交了");

//    })

})