仿Google自動補全ajax

//自动补全框开始是影藏的
//定义全局变量,表示当前高亮节点

var hlindex = -1;
var timoutId;
$(document).ready(function()
{
    var wordInput = $("#word")
    var wordInputOffset = wordInput.offset();
    //alert(wordInputOffset.top+ "," +wordInputOffset.left);

    $("#auto").hide().css("border","1px black solid")
                     .css("position","absolute")
                     .css("top",wordInputOffset.top + wordInput.height() + 6 + "px")
                     .css("left",wordInputOffset.left + "px")
                     .width(wordInput.width()+2);
    
    wordInput.keyup(function(event)
    {
        //处理文本框的键盘事件

        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的字母,backspace,delete,应该将文本框最新的数据发给服务器

        if(keyCode >=65 && keyCode <=90 || keyCode==8 || keyCode==46)
        {
            //1.首先获取文本框的内容

            var wordText = $("#word").val();
            var autoNode = $("#auto");
            if(wordText != "")
            {
                //对上次未完成的延时操作进行取消

                clearTimeout(timoutId);
                //延迟交互

                timoutId = setTimeout(function()
                {
                    //2.将文本框的内容发送给服务器

                    $.post("AutoComplete",{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);
                            //将单词内容加入到新建的节点中

                            //将新建的节点加入到弹出框的节点中

                            var newDivNode = $("

").attr("id",i);

                            newDivNode.html(wordNode.text()).appendTo(autoNode);
                            //增加鼠标进入事件,高亮节点

                            newDivNode.mouseover(function()
                            {
                                if(hlindex != -1)
                                {
                                    $("#auto").children("div").eq(hlindex)
                                    .css("background-color","white");
                                }
                                hlindex = $(this).attr("id");
                                $(this).css("background-color","red");
                            });
                            newDivNode.mouseout(function()
                            {
                                $(this).css("background-color","white");
                            });
                            
                            newDivNode.click(function()
                            {
                                //取出高亮节点的文本内容

                                var comText = $(this).text();
                                hlindex = -1;
                                $("#word").val(comText);
                                autoNode.hide();
                            });
                            
                        });
                        if(wordNodes.length>0)
                        {
                            autoNode.show();
                        }
                        else
                        {
                            autoNode.hide();
                            hlindex = -1;
                        }
                    },"xml");
                },500);
                
            }
            else
            {
                autoNode.hide();
                hlindex = -1;
            }
        }
        else if(keyCode == 38 || keyCode == 40)
        {
            //如果输入的是向上或向下的键    

            if(keyCode == 38)
            {
                var autoNodes = $("#auto").children("div");
                if(hlindex != -1)
                {
                    //如果原来存在高亮节点,则将背景色改为白色

                    autoNodes.eq(hlindex).css("background-color","white");
                    hlindex--;
                }
                else
                {
                    //如果修改索引值以后index变成-1,则将索引值指向最后一个元素

                    hlindex = autoNodes.length -1;
                }
                
                autoNodes.eq(hlindex).css("background-color","red");
            }
            if(keyCode == 40)
            {
                var autoNodes = $("#auto").children("div");
                if(hlindex != -1)
                {
                    //如果原来存在高亮节点,则将背景色改为白色

                    autoNodes.eq(hlindex).css("background-color","white");
                }
                hlindex++;
                if(hlindex == autoNodes.length)
                {
                    //如果修改索引值以后index变成autoNodes.length,则将索引值改为0

                    hlindex = 0;
                }
                autoNodes.eq(hlindex).css("background-color","red");
            }
        }
        else if(keyCode == 13)
        {
            //回车的操作

            if(hlindex != -1)
            {
                //取出高亮节点的文本内容

                var comText = $("#auto").hide().children("div").eq(hlindex).text();
                hlindex = -1;
                $("#word").val(comText);
            }
            else
            {
                //下拉框没有高亮内容

                alert("文本框中的[" +$("#word").val() + "]被提交了!!");
                $("#auto").hide();
                //让文本框失去焦点

                $("#word").get(0).blur();
            }
        }    
        
    });
    
    $("input[type='button']").click(function()
    {
        alert("文本框中的[" +$("#word").val() + "]被提交了!!");
    });
});

html：

阅读(1084) | 评论(0) | 转发(0) |

0

上一篇：taglib引用

下一篇：截取中文字符串（面试题）