仿Google自动补全 jQuery 不含索引处理

自动补全

1． 页面有一个文本框，一个自动提示层，一个按

 

<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/autoComplete.js"></script>

<div style="text-align: left; width: 500px;">
<input type="text" id="key" style="width: 400px;height:25px;" />
<input type="button" id="commit" style="background-color:#1874CD;width:70px;height:25px;border:0px;color:#ffffff;" value=" 提 交 "/>
<div id="autoKey"></div>
</div>

 

自动提示JavaScript…

//页面加载好，autoKey应该隐藏

$(document).ready(function(){

    //定义高亮变量，控制上下键的选择
    //-1代表不高亮任何行
    var highlightindex = -1;
    //提示层的子层数组
    var completesVal;
	//将要显示的提示
	var keys;
    //时间延迟对象
    var timeDelay;

    //获得输入input的对象
    var keyInput=$("#key");
    var keyInputOffset=keyInput.offset();
    var autoDiv=$("#autoKey");
    //提示层的样式
    autoDiv.hide().css("border","1px solid #999999").css("position","absolute")
            .css("top",keyInputOffset.top + keyInput.height() + 8 + "px")
            .css("left",keyInputOffset.left + "px").width(keyInput.width() + 6)
            .css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF");


    
    //按键按下后与服务器的交互
    keyInput.keyup(function(event){
        
        //获取键盘事件对象
        var keyEvent=event || window.event;

        //判断键盘输入的值得范围
        //1.输入的是正常的字母
        //2.向上向下键
        //3。回车键
        var keyCode=keyEvent.keyCode;

        if(keyCode !=38 && keyCode !=40 && keyCode != 13){
            //获取当前文本框中的值
            var currentVal=keyInput.val();
            //如果当前的文本框内容为空，就不在向服务器发送请求
            if(currentVal != ""){
                //取消上次提交
                window.clearTimeout(timeDelay);
                //延迟500ms提交,防止频繁提交
                timeDelay=window.setTimeout(function(){
                    $.post("../ParseParam",{paramInfo:currentVal},function(data){

					 //清空autoDiv的内容并且隐藏
                    	autoDiv.html("");
                    
                    //对回传的数据抽取，组成一个key的数组
                    keys=$(data).find("key");

                    keys.each(function(){

                        var keyval=$(this).text();
                        
                        if(keyval !=null){
                       	 	$("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(keyval).appendTo(autoDiv);
						}
                    });
                    if(keys.length>0){
                        //为提示加上鼠标的选择功能
                        //鼠标over||out会触发事件，并高亮
                        //单击高亮层关闭提示层，并且把值传给文本框

                        completesVal=autoDiv.children("div");

                        //鼠标一移到autoKey上面，上下键的选择就取消
                        autoDiv.mouseover(function(){
                            //highlightindex不等于-1说明先前用上下键移动过
                            if(highlightindex != -1){
                                //定位到那个节点，取消其高亮
                                completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                                //highlightindex = -1;
                                highlightindex = -1;
                            }
                        });

                        completesVal.each(function(){
                            var t=$(this);
                            t.css("cursor","pointer").mouseover(function(){
                                //加上mouseover事件
                                t.css("background-color","#7EC0EE").css("color","#000000");
                            }).mouseout(function(){
                                //mouseout事件
                                t.css("background-color","white").css("color","#aaaaaa");
                            }).click(function(){
                                //单击事件
                                keyInput.val(t.text());
                                autoDiv.hide();
                            });
                        });

                        highlightindex = -1;
                        autoDiv.show();
                    }else{
                        highlightindex = -1;
                        autoDiv.hide();
                    }
                },"xml");
                },500);

            }
        
        }else if(keyCode == 38 || keyCode ==40 || keyCode == 13){
            //第一步先获得提示框里所有补全信息的数组
            // var completesVal=$("#autoKey").children("div");考虑到效率，把这步放到全局
            //向下键的控制
            if(keyCode == 40){
                //如果现在的高亮是存在的，那么我们就要移动highlightindex
                if(highlightindex != -1){
                    //去掉当前高亮
                    completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                }
                //移动高亮的指针,
                //注意这里的highlightindex++一定要放在if的外面，
                // 放在里面如果hightlightindex=-1，则永远也移动不了
                highlightindex++;
                //判断是否到了最后一个元素
                if(highlightindex == completesVal.length){
                    highlightindex = 0;
                }
                //高亮当前highlightindex节点
                completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
            }
            //向上键的控制
            if(keyCode == 38){
                if(highlightindex != -1){
                    completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                    highlightindex--;
                }
                if(highlightindex ==-1){
                    highlightindex=completesVal.length;
                }
                 //高亮当前highlightindex节点
                completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
            }

            //enter键的控制
            //1.按下enter键，把提示的值传给文本框
            //2.关闭提示层
            //3.提交
            if(keyCode == 13){
                
                if(highlightindex != -1){
                    //获取当前高亮值
                    var comsVal = completesVal.eq(highlightindex).text();
                   
                    //给文本框赋值
                    keyInput.val(comsVal);
                    //高亮索引回归到初始化
                    highlightindex = -1;
                    //隐藏提示框
                    autoDiv.hide();
                }else{
                    
                    commitSearch();

                    //文本框失去焦点，不然按回车会不停的发出请求
                    keyInput.get(0).blur();
                    autoDiv.hide();
                }
            }

        }
    });


    //提交按钮的事件
    var commitBtn=$("#commit");
    //commitBtn的click事件
    commitBtn.click(commitSearch);

    //提交函数 
    function commitSearch(){

        var cv=keyInput.val();

        //cv=encodeURIComponent(cv);

        window.location.href="../SearchIndex?paramInfo="+cv;
       // $.get("../SearchIndex",{paramInfo:cv});
        
    }
    //keyInput失去焦点后关闭提示层
    //keyInput.blur(function(){
        //autoDiv.hide();
        //highlightindex = -1;
   // });
});

 

 

 

后面的一部分被截断了，可以到我的首页，有续。。

评论

2 楼 summersmile 2010-04-29  

好贴，谢谢！！

1 楼 1zebra 2009-11-18  

不错，我去试试