var highlightindex = -1; //定义高亮显示索引,-1代表不高亮任何行 
var timeOutId = null; //定义延迟时间Id
var delayTime = 100; //默认延迟 秒
var minPrefix = 0; //定义最小几个字符开始搜索
var mouseOverCss = { background: "white", cursor: " pointer" }; //mouseover时样式
var mouseOutCss = { background: "white", color: "#000" }; //mouseout时样式
var grayCss = { background: "#3358B1", cursor: " pointer", color: "#FFF" };
var upDownGrayCss = { background: "#3358B1"};
var upDownWhiteCss = { background: "white" };
var CountCss = { color: "red", float: "right" };
var W_height = null;//显示关键字层高度

function InitwordInput() {
    var wordInput = $("#wordInput");
    wordInput.focus(function () {
        if ($(this).val() == "搜索 商务皮鞋") {
            $(this).val("");
        }
    });

    wordInput.attr("autocomplete", "off");
    var wordInputOffset = wordInput.offset();
    
    var divAutoList = $("<div>").attr("id", "divAutoList");
    W_height = wordInput.height();
    divAutoList.appendTo(wordInput.parent()); //显示记录层
  // divAutoList.appendTo($(document.body)); //显示记录层
    //隐藏自动补全框,并定义css属性
    $("#divAutoList").hide()
              .css("position", "absolute")
              .css("z-index", "10000")
              .css("border", "1px #949599 solid") //边框 黑色
    // .css("top", wordInputOffset.top + wordInput.height()+3+ "px")
              .css("top", wordInput.height() + 7 + "px")
              .css("left", wordInputOffset.left - wordInput.parent().offset().left + "px")
              .width(wordInput.width() + 6)
              .css("background", "white");

    //按下Enter键，提交搜索内容
    wordInput.keydown(function (event) {
        var myEvent = window.event || event;
        var keyCode = myEvent.keyCode;
        if (keyCode == 13) {
            if (highlightindex != -1) {
                var comText = $("#divAutoList").hide().children("div").eq(highlightindex).attr("name");
                wordInput.val(comText);
            }
            return SubInput();
        }
    });

    //给文本框添加键盘按下并弹起的事件
    wordInput.keyup(function (event) {
        if ($.trim(wordInput.val()).length < 1) {
            $("#divAutoList").hide();
            return;
        }
        var myEvent = window.event || event;
        var keyCode = myEvent.keyCode;
        var autoNode = $("#divAutoList"); //可供选择的项
        if (keyCode == 37 || keyCode == 39) return;
        if (!(keyCode >= 65 && keyCode <= 90 ||
                keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105 || keyCode == 106 ||
                keyCode == 107 || keyCode == 109 || keyCode == 110 || keyCode == 111 ||
                keyCode >= 186 && keyCode <= 192 || keyCode >= 219 && keyCode <= 222) && keyCode != 40 && keyCode != 38 && keyCode != 46 && keyCode != 8)
            return;

        /*****************搜索开始************************/

        if (keyCode != 13 && keyCode != 38 && keyCode != 40) { //不是三个特殊键，可以搜索
            var wordText = wordInput.val();
            if (wordText.length < minPrefix) return; //取消上次提

            timeOutId = setTimeout(function () {

                //ajax请求
                $.get("/Show/Input", { input: wordText }, function (data) {
                    autoNode.html(data);
                    //添加光标进入事件, 高亮节点
                    autoNode.find("div").each(function (i) {
                        $(this).css("height", W_height + "px");
                        $(this).hover(function () {
                            if (highlightindex != -1) {
                                $("#divAutoList").children("div")
                                                            .eq(highlightindex)
                                                            .css(mouseOverCss);
                            }
                            highlightindex = $(this).attr("id");
                            $(this).css(grayCss);
                        },
                             function () {
                                 $(this).css(mouseOutCss);
                             });
                        //添加光标mousedown事件  点击事件newDivNode.click可能不起作用?
                        $(this).mousedown(function () {
                            var comText = $(this).attr("name");
                            $("#divAutoList").hide();
                            highlightindex = -1;
                            wordInput.val(comText);
                            return SubInput();
                        });
                    });
                    if (autoNode.find("div").length > 0) {
                        autoNode.show();
                    }
                    else {
                        autoNode.hide();
                        highlightindex = -1;
                    }
                });
            }, delayTime);
        } else if (keyCode == 38) {//输入向上,选中文字高亮
            var autoNodes = $("#divAutoList").children("div")
            if (highlightindex != -1) {
                autoNodes.eq(highlightindex).css(upDownWhiteCss);
                highlightindex--;
            }
            else {
                highlightindex = autoNodes.length - 1;
            }

            if (highlightindex == -1) {
                highlightindex = autoNodes.length - 1;
            }
            autoNodes.eq(highlightindex).css(upDownGrayCss);

        }
        else if (keyCode == 40) {//输入向下,选中文字高亮
            var autoNodes = $("#divAutoList").children("div")
            if (highlightindex != -1) {
                autoNodes.eq(highlightindex).css(upDownWhiteCss);
            }
            highlightindex++;
            if (highlightindex == autoNodes.length) {
                highlightindex = 0;
            }
            autoNodes.eq(highlightindex).css(upDownGrayCss);

        }
        /*****************搜索结束********************/
    });

}

$(function () {
    if (document.getElementById("wordInput") != null) {
        InitwordInput();
    }
});

function SubInput() {
    if ($("#wordInput").val().trim().length > 0) {
        var wordInput = $("#wordInput").val().replace("%", "％").replace("'", "＇").replace("<", "&lt;").replace(">", "&gt;");
        window.location.href = "/Products/List?keyword=" + escape(wordInput);
        return true;
    }
    alert("请输入关键字");
    return false;
}