//自己写的自动补全js
var highlightindex = -1;   //高亮
var timeoutId;   //延迟请求服务器
$(function () {
    var wordInput = $("#word");   //文本框
    var wordInputOffset = wordInput.offset();    //文本框的top、left属性 拿到这些属性 弹出框就好绝对定位了

    $("#auto").hide().css("border", "1px #DDDDDD solid").css("position", "absolute")   //弹出框默认隐藏，有边框
            .css("top", wordInputOffset.top + wordInput.height() + 6 + "px")    //绝对定位确定弹出框的位置
            .css("left", wordInputOffset.left + "px").width(wordInput.width() + 4);

    wordInput.keyup(function (event) {   //event取当前键盘按下的键
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;    //键值 不同的值代表不同的键  13是回车等
        //alert(keyCode); //按键就能得到键值

        //如果输入的是字母（65到90），应该将文本框中最新的信息发送给服务器
        //如果输入的是退格键、删除键或者空格键，也应该将文本框中的最新信息发送给服务器    其他之外的情况都不向服务器请求
        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || keyCode == 32) {
            var wordText = $("#word").val();
            var autoNode = $("#auto");   //缓存对象（弹出框）

            //用户有输入才发送异步请求（wordText是文本框内容）
            if (wordText != "") {
                //取消上次未完成的延时操作
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {      //延迟再提交（500毫秒），防止每按下键盘就向服务器发送一次请求
                    $.get("HandlerXML.ashx?timeStamp=" + (+new Date), { keyword: wordText }, function (data) {
                        var wordNodes = $(data).find("word");   //找到xml下word节点下内容（data是返回的整个xml内容）

                        //先清空弹出框（否则每次输入都再累加）
                        autoNode.html("");
                        wordNodes.each(function (i) {   //定义i 每个div节点都有id属性 就是下拉框的索引值
                            var wordNode = $(this);   //弹出框里的每一条内容

                            var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
                            newDivNode.html(wordNode.text()).appendTo(autoNode);

                            //鼠标移入高亮，移开不高亮
                            newDivNode.mouseover(function () {
                                if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）
                                    $("#auto").children("div").eq(highlightindex)
                                                  .css("background-color", "white");

                                }
                                //记录新的高亮节点索引
                                highlightindex = $(this).attr("id");
                                $(this).css("background-color", "#FFDFC6");

                                //输入放置的那个节点也要将其内容添加到输入框内
                                var showText = $("#auto").children("div").eq(highlightindex).text();
                                $("#word").val(showText);
                            });
                            newDivNode.mouseout(function () {
                                $(this).css("background-color", "white");
                            });

                            //鼠标点击文字上屏
                            newDivNode.click(function () {
                                //取出高亮节点的文本内容
                                var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                                highlightindex = -1;
                                //文本框中的内容变成高亮节点的内容
                                $("#word").val(comText);
                            })
                        });
                        if (wordNodes.length > 0) {    //如果返回值有内容就显示出来
                            autoNode.show();
                        } else {               //服务器端无内容返回 那么隐藏弹出框
                            autoNode.hide();
                            //弹出框隐藏的同时，高亮节点索引值也变成-1
                            highlightindex = -1;
                        }
                    }, "xml")
                }, 500)   //延迟500毫秒再想服务器发送请求
            } else {
                autoNode.hide();
                highlightindex = -1;   //框隐藏了  就没有高亮了 故设置highlightindex为初始值 下次按上下键从0开始
            }
        } 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) {
                    //如果修改索引值以后index变成-1，则将索引值指向最后一个元素
                    highlightindex = autoNodes.length - 1;
                }
                //让现在高亮的内容变成红色
                autoNodes.eq(highlightindex).css("background-color", "#FFDFC6");

                //取出当前选中的项 赋值到输入框内
                var comText = autoNodes.eq(highlightindex).text();
                $("#word").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", "#FFDFC6");

                var comText = autoNodes.eq(highlightindex).text();
                $("#word").val(comText);
            }
        } 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();

                //已经提交，让文本框失去焦点（再点提交或者按回车就不会触发keyup事件了）
                $("#word").get(0).blur();
            }
        } else if (keyCode == 27) {    //按下Esc 隐藏弹出层
            if ($("#auto").is(":visible")) {
                $("#auto").hide();
            }
        }
    });

    //给按钮添加事件，表示文本框中的数据被提交
    $("input[id='btnSubmit']").click(function () {
        alert("文本框中的 " + $("#word").val() + " 被提交了");
    });

    document.onclick = function (e) {
        var e = e ? e : window.event;
        var tar = e.srcElement || e.target;
        if (tar.id != "word") {        //id等于word就说明点击的是搜索框 那么不需要执行隐藏和显示等任何操作 根据输入的关键字显示弹出层
            if ($("#auto").is(":visible")) {    //如果点击的不是搜索框  并且当前弹出层是显示的 那么隐藏弹出层
                $("#auto").css("display", "none")
            }
        }
    }
})