仿谷歌自动补全js

大四那年在东软实习时，编写的一个仿谷歌自动补全的js。而且已改造通用模板，根据οnfοcus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')"几个关键key在sevice层中控制业务逻辑。

modelgoogle.js

   //全局查询采用仿谷歌技术——ardo
	var divSize = 0;//初始div长度
	var timeoutId;//设置ajax向服务器请求的延时时间

	function init(id,donum,path)
	{	
	var highlightindex = -1;//高亮节点，全局用于鼠标和键盘事件的操作
	var wordInput = $("#"+id);//获取input的id
   	var wordInputOffset = wordInput.offset();
   	$("body").append("
");
    	$("#auto").hide().css("border","2px #2828FF solid").css("position","absolute").css("background-color","white").css("z-index","99")
      		.css("top",wordInputOffset.top + wordInput.height() + 14 + "px")
      		.css("left",wordInputOffset.left + "px").width(wordInput.width()+3);
        
    wordInput.die("keyup");
    wordInput.keyup(function(event)
    {	
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        //a-z 0-9 小键盘0-9 
        if((keyCode >= 65 && keyCode <= 90) || keyCode == 8 || keyCode == 46 || (keyCode >= 48 && keyCode <= 57) || (keyCode>=96 && keyCode<=105) || keyCode == 32)
        {
   	        var wordText = wordInput.val();
   	        var autoNode = $("#auto");
   	        
   	        if(wordText != "")
   	        {
	   	        clearTimeout(timeoutId);
	   	        
	   	        timeoutId = setTimeout(function()
	   	        {	//alert(path+wordText+donum);
	   	            $.post(path,{wordText:wordText,donum:donum},function(data,textStatus)
		   	        {	
	   	            	autoNode.html("");
		   	            $.each(data,function(entryIndex,entry)
		   	            {	
		   	            	//alert(entry);
		   	                var newDivNode = $("
").attr("id",entryIndex);
		   	                newDivNode.html(entry.replace(wordText,""+wordText+"")).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","#D1D1D1");
		   	                    var conText = $("#auto").children("div").eq(highlightindex).text();
            					wordInput.val(conText);
		   	                });
		   	                
		   	                newDivNode.mouseout(function()
		   	                {
		   	                    $(this).css("background-color","white");
		   	                });
		   	                
		   	                newDivNode.click(function()
		   	                {
		   	                    if(highlightindex != -1)
			    	            {
			    	                var comText = $(this).text();
			    	                $("#auto").hide();
			    	                highlightindex = -1;
			    	                wordInput.val(comText);
			    	            }
		   	                });
		   	                
		   	                divSize = divSize + 1;
		   	            });
			              
			            if(divSize != 0)
			            {
		   	                autoNode.show();
		   	            }
		   	            else
		   	            {
		   	                autoNode.hide();
		   	                highlightindex = -1;
		   	            }
		   	            
		   	        },"json");
	   	        
	   	        },500);       
	   	        
   	        }
   	        else
   	        {
   	            autoNode.hide();
   	            highlightindex = -1;
   	        }
        }
        //up
        else if(keyCode == 38)
        {
            var autoNodes = $("#auto").children("div");
            
            if(highlightindex != -1)
            {
                autoNodes.eq(highlightindex).css("background-color","white");
                highlightindex = highlightindex - 1;  
                var conText = $("#auto").children("div").eq(highlightindex).text();
            	wordInput.val(conText); 	            
            }
            
            if(highlightindex == -1)
            {
                highlightindex = autoNodes.length - 1;
                var conText = $("#auto").children("div").eq(highlightindex).text();
            	wordInput.val(conText);
            }
            
            autoNodes.eq(highlightindex).css("background-color","#D1D1D1");
        }
        //down
        else if(keyCode == 40)
        {
            var autoNodes = $("#auto").children("div");
            
            if(highlightindex != -1)
            {
                autoNodes.eq(highlightindex).css("background-color","white");
            }
            
            highlightindex = highlightindex + 1;
            var conText = $("#auto").children("div").eq(highlightindex).text();
            wordInput.val(conText);
            
            if(highlightindex == autoNodes.length || highlightindex > autoNodes.length)
            {
                highlightindex = 0;
                var conText = $("#auto").children("div").eq(highlightindex).text();
            	wordInput.val(conText);
            }
            
            autoNodes.eq(highlightindex).css("background-color","#D1D1D1");
        }
        else if(keyCode == 13)
        {
            if(highlightindex != -1)
            {
                var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                highlightindex = -1;
                wordInput.val(comText);
            }
        }
    });
}

fileList.jsp

        

            

                
                    
                    
                     
                           
                    高级搜索
            
 
        

代码下载地址： http://download.csdn.net/download/ardo_pass/9733905