仿谷歌自动补全js

╰半夏微凉° 2022-07-13 12:57 147阅读 0赞

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

![Center][]

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("<div id='auto'></div>");
        	$("#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 = $("<div style='height:20px;cursor:hand;font-size:13px;font-family:宋体;padding-top:3px;'>").attr("id",entryIndex);
    		   	                newDivNode.html(entry.replace(wordText,"<b><span style='color:#FF5809'>"+wordText+"</span></b>")).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

<div align="center">
                <div style="border:solid 0px red;  vertical-align: bottom; WIDTH: 800px;padding-top: 35px;">
                    
                        <input type="hidden" id="hotKeyword" name="hotKeyword" value="${seachSlsRule.ruleKey}"/>
                        <input  id="hotKeyword1" value="${seachSlsRule.ruleKey}"  style="background-color: #FFFFFF;width: 550px;    height: 33px;   line-height: 20px;  vertical-align: middle;padding: 6px 2px;    font-size: 16px;    border: 1px #7E9DB9 solid" 
                            type="text" οnfοcus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')" />
                        <input  style="width: 80px;height: 33px;line-height: 20px;color:black; background-color: #EBEBEB;" value="搜索文档" type="button"  οnclick="CheckKeyWords();"/> 
                               
                        <a id="switchAdvSearch" style="cursor:hand;color:black;vertical-align: bottom;"><font style="color: white; font-size: 10px;">高级搜索</font></a>
                </div> 
            </div>
     
     
    
    
    代码下载地址：http://download.csdn.net/download/ardo_pass/9733905

[Center]: /images/20220713/71f03c48c87d4226b1c8f3dc07868fa5.png