// JavaScript Document
//仿Google 自动完成

//InputBoxId="";//搜索框名
//AutoCompleteId="AutoComplete"; 下拉框（自动框）
//AutoCompleteXML=""; //xml 数据源

//表示当前高亮的节点

/*
AutoComplete.xml
<?xml version="1.0" encoding="utf-8"?>
<words>
    <word>我</word>
    <word>们</word>
    <word>都</word>
    <word>爱</word>
    <word>Jquery</word>
</words>*/

var highlightindex = -1;
var timeoutId;
var isselect=false;
$(document).ready(function(){
    var wordInput = $("#"+InputBoxId);
	var ObjAutoComplete=$("#"+AutoCompleteId)
    var wordInputOffset = wordInput.offset();
   
    //隐藏自动补全框并通过CSS设置补全框的位置大小及样式
   // ObjAutoComplete.hide().css("border","1px black solid").css("position","relative").css("background-color","white"); //此处可根据自己的网页布局以及页面元素大小调整。
   
   
    //添加键盘按下并弹起的事件
    wordInput.blur(function(event){if(!isselect)ObjAutoComplete.hide();});
	ObjAutoComplete.mouseover(function(event){isselect=true;});
	ObjAutoComplete.mouseout(function(event){isselect=false;});
   
    //添加键盘按下并弹起的事件
    wordInput.keyup(function(event){
        //处理文本框中的键盘事件
        var myEvent = event||window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
        if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32){
           
            //获取文本框的内容
            var wordText = wordInput.val();
            var autoNode = ObjAutoComplete;
            if(wordText.replace(' ','')!=""){//2009.6.7 UPDATE：之前在这加上了退格与delete的keyCode的判断，实际上是没有必要的。

            //将文本框中的内容发送到服务器端
            //对上次未完成的延时操作进行取消
            clearTimeout(timeoutId);
            //对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
            timeoutId = setTimeout(function(){
                $.post(AutoCompleteXML,{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节点将单词内容加入到新建的节点中,将新建的节点加入到弹出框的节点中
                    var newDivNode = $("<div>").attr("id",i).css("padding-left","1em");
                    newDivNode.html((wordNode.text())).appendTo((autoNode));
                   
                    //增加鼠标进入事件，高亮节点;
                    newDivNode.mouseover(function(){
                        if(highlightindex != -1){
                            ObjAutoComplete.children("div").eq(highlightindex).css("background-color","white");
                        }
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color","yellow");
                    });
                    //增加鼠标移出事件，取消当前高亮节点
                    newDivNode.mouseout(function(){
                        $(this).css("background-color","white");
                    });
                   //增加鼠标点击事件，可以进行补全
                    newDivNode.click(function(){
                        var comText = $(this).text();
                        ObjAutoComplete.hide();
                        highlightindex=-1;
                        wordInput.val(comText);
                   
                   
                    });
                   
                   
                });
                //如果服务器端有数据返回，则显示弹出框
                if(wordNodes.length>0){
                    autoNode.show();
                }else {
                autoNode.hide();
                highlightindex=-1;
                }
            },"xml");
            },100);
           
            }else{
                autoNode.hide();
				
                highlightindex=-1;
                }
        } else if(keyCode == 38 || keyCode==40){
            //如果输入的是向上38向下40按键
            if(keyCode == 38){
                //up
                var autoNodes = ObjAutoComplete.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","yellow");
				wordInput.val(autoNodes.eq(highlightindex).text());
            }
            if(keyCode == 40){
                //down
                var autoNodes = ObjAutoComplete.children("div");
				
                if(highlightindex !=-1)
                {
                    autoNodes.eq(highlightindex).css("background-color","white");
                }
                highlightindex++;
                if(highlightindex == -1){
                   //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                    highlightindex = 0;
					
                }
               //让现在被高亮的内容变成黄色
                autoNodes.eq(highlightindex).css("background-color","yellow");
				wordInput.val(autoNodes.eq(highlightindex).text());
            }
           
        }else if(keyCode == 13){
           //如果按下的是回车
           
            //下拉框有高亮的内容
            if(highlightindex !=-1)
            {
                var comText = ObjAutoComplete.hide().children("div").eq(highlightindex).text();
                highlightindex=-1;
                wordInput.val(comText); //将文本框内容改成选中项
				//alert("文本框中的[" + wordInput.val() + "]被提交了");
                $("form:first").submit(); //提交form。若没有这句话，按下回车后，仅仅只改变了文本框里的内容，但是由于form本身就监控了回车按键默认为submit，提交的是文本框改变之前的内容，解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容，此时，提交的内容就是选中项。

            }
           //下拉框没有高亮的内容
            else{
               
                ObjAutoComplete.hide();
               //让文本框失去焦点
                wordInput.get(0).blur();
            }
        }
       
    });
   
   
})