仿谷歌自动补全js

最新推荐文章于 2021-06-03 15:38:00 发布

阿杜_ardo

最新推荐文章于 2021-06-03 15:38:00 发布

阅读量459

点赞数

CC 4.0 BY-SA版权

分类专栏：技术总结文章标签：自动补全 js jquery 仿谷歌

本文链接：https://blog.youkuaiyun.com/ardo_pass/article/details/54314504

技术总结专栏收录该内容

102 篇文章

订阅专栏

本文介绍了一种仿谷歌自动补全功能的JavaScript实现方案，该方案通过AJAX技术从服务器获取数据，并能响应用户的键盘输入进行实时更新。同时支持鼠标悬停高亮显示及上下键导航等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大四那年在东软实习时，编写的一个仿谷歌自动补全的js。而且已改造通用模板，根据onfocus="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("<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" onfocus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')" />
                    <input  style="width: 80px;height: 33px;line-height: 20px;color:black; background-color: #EBEBEB;" value="搜索文档" type="button"  onclick="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.youkuaiyun.com/download/ardo_pass/9733905