//显示高亮对应的数组的索引
var highlightindex = -1;
//提示延迟
var timeOutId;
$(document).ready(function() {
    //取得输入框对象
    var wordinput = $("#word");
    //获取输入框在当前视口的相对偏移
    var wordinputoffset = 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() + 2 + "px");
    //键盘事件
    $("#word").keyup(function(event) {
        var myEvent = event || window.event;
        //获取当前键值
        var keyCode = myEvent.keyCode;
        // 按下字母键和退格、delete键
        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46){
            var wordText = $("#word").val();
            var autoNode = $("#auto");
            //只有输入框中有值时才向服务器发送请求
            if (wordText != "") {
                //取消上次未完成的操作
                clearTimeout(timeOutId);
                //对服务器的请求延迟200ms
                timeOutId = setTimeout(function(){
                     $.post(
                    	"search.action",
                    	{
                    		word:wordText,
                    		action:'see'
                    	}, function(data) {
                    //将dom对象转化为jquery对象 
                    var jqueryObj = $(data);
                    //找到所有的word节点
                    var wordNodes = jqueryObj.find("word");
                    //遍历前清空原来的内容
                    autoNode.empty();
                    wordNodes.each(function(i){
                        var wordNode = $(this);
                        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(){
                            $("#word").val( $(this).text());
                             highlightindex = -1;
                            $("#auto").hide();
                        });
                    });
                    if (wordNodes.length > 0) {
                        autoNode.show();
                    } else {
                        autoNode.hide();
                        highlightindex = -1;
                    }
                }, "json");
                },200);
            }
            else {
                autoNode.hide();
                highlightindex = -1;
            }
        }
        // 按下上下键
        else if (keyCode == 38 || keyCode == 40) {
            //按下向上键后
            if (keyCode == 38) {
                //取得提示框中的各个div
                var autoNodes = $("#auto").children("div");
                if (highlightindex != -1) {
                    //如果当前有高亮节点，则把该高亮节点背景色变为非高亮背景色
                    autoNodes.eq(highlightindex).css("background-color", "white");
                    highlightindex --;
                } else {
                    highlightindex = autoNodes.length - 1;
                }
                if (highlightindex == -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 ++;
                } else {
                    highlightindex = 0;
                }
                if (highlightindex == autoNodes.length) {
                    highlightindex = 0;
                }
                autoNodes.eq(highlightindex).css("background-color", "red");
            }
        }
        // 按下回车
        else if (keyCode == 13) {
            if (highlightindex != -1) {
                var conText = $("#auto").hide().children("div").eq(highlightindex).text();
                highlightindex = -1;
                $("#word").val(conText);
            } else {
                alert("文本框中的内容【" + $("#word").val() + "】被提交了");
                $("#auto").hide();
                $("#word").blur();
            }
        }
    });
    $("input[type='button']").click(function(){
        var word=$('#word').val();
        if(word==null || word==""){
        	alert('Please enter the name of the product');
        	return false;
        }
    });

});