实现类似于google,baidu的搜索提示功能，带有上下键选择功能

于 2010-09-09 18:47:00 发布
阅读量1.5k 收藏 1
点赞数
文章标签： google search javascript callback null div

文章分类:Web前端

以前一直在用ajax实现异步调用,但一直没有时间到带有搜索提示的功能，前几天由于工作需要，终于写了一个，整理了一下代码，我使用的技术是js+dwr2.0,在下面的js中只需要调用一个后台的方法即可.为了更好的演示，所以用一个数组代替。
注:其中部分代码不是原创，但是忘了从哪down下来的了，找了半天，很郁闷，没找到，请原作者多多见谅！对了，偶弄了个附件，呵呵！
suggest.html中的代码,很简单
Java代码 复制代码
  1. <head>   
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  3. <title>js 搜索提示</title>   
  4. <script language="javascript" src="suggest.js"></script>   
  5. <link  type="text/css" rel="stylesheet"  href="suggest.css" />   
  6. </head>   
  7.   
  8. <body οnlοad="noShow();">   
  9.     <table>   
  10.         <tr>   
  11.             <td>   
  12.                 <input type="text" id="search"  οnkeyup="javascript:getSearchContent(event);"/><br/>   
  13.             </td>   
  14.         </tr>   
  15.         <tr>   
  16.             <td>   
  17.                   <div id="search_suggest" style="width:525;left:445"></div>   
  18.             </td>   
  19.         </tr>   
  20.     </table>   
  21. </body>   
  22. </html>  

suggest.css代码，down下来的

 

Java代码 复制代码
  1. @charset "utf-8";   
  2. /* CSS Document */  
  3. .suggest_link {   
  4.     background-color: #FFFFFF;   
  5.     padding: 2px 6px 2px 6px;   
  6. }   
  7. .suggest_link_over {   
  8.     background-color: #E8F2FE;   
  9.     padding: 2px 6px 2px 6px;   
  10. }   
  11. #search_suggest {   
  12.     position: absolute;   
  13.     background-color: #FFFFFF;   
  14.     text-align: left;   
  15.     border: 1px solid #000000;      
  16. }    
@charset "utf-8";
/* CSS Document */
.suggest_link {
	background-color: #FFFFFF;
    padding: 2px 6px 2px 6px;
}
.suggest_link_over {
    background-color: #E8F2FE;
    padding: 2px 6px 2px 6px;
}
#search_suggest {
    position: absolute;
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #000000;   
}

suggest.js 有down的但是大部分是自己的心血，呵呵！
Java代码 复制代码
  1. //搜索建议 总数   
  2. var length = 0;   
  3. //当前选中的搜索建议   
  4. var currentSelected = -1;   
  5. //获取当前鼠标所获取的行   
  6. var currentOut;   
  7.   
  8. /**  
  9. *   获取搜索提示信息  
  10. **/  
  11. function getSearchContent( evt )   
  12. {   
  13.     var text = document.getElementById("search");   
  14.     var key = window.event?evt.keyCode:evt.which;   
  15.     if( null != currentOut )    
  16.     {   
  17.         suggestOut(currentOut);   
  18.     }   
  19.            
  20.     //向上键   
  21.     if( key == 38 )   
  22.     {   
  23.         if( currentSelected == -1 )   
  24.         {   
  25.             currentSelected = 0;   
  26.         }   
  27.         if( length == 0 )   
  28.         {   
  29.             currentSelected = 0;   
  30.         }   
  31.         else  
  32.         {   
  33.            
  34.             if( currentSelected == 0 )   
  35.             {   
  36.                 currentSelected = length - 1 ;   
  37.                 var c = document.getElementById("suggset" + ( 0 )  );   
  38.                 c.className = 'suggest_link';   
  39.             }   
  40.             else{   
  41.                 currentSelected = currentSelected - 1 ;   
  42.             }      
  43.                
  44.         }   
  45.         if( null != document.getElementById("suggset" + currentSelected ) )   
  46.         {   
  47.             /** 去除索引的选中颜色 **/  
  48.             if( currentSelected == length - 1)   
  49.             {   
  50.                 var c = document.getElementById("suggset" + ( length - 1 )  );   
  51.                 c.className = 'suggest_link';   
  52.             }else  
  53.             {   
  54.                 var c = document.getElementById("suggset" + ( currentSelected  + 1 )  );   
  55.                 c.className = 'suggest_link';   
  56.             }   
  57.             var current = document.getElementById("suggset" + currentSelected );   
  58.             current.className = "suggest_link_over";   
  59.             text.value = current.innerHTML;   
  60.         }   
  61.         return;   
  62.                
  63.     }   
  64.     //向下键   
  65.     if( key == 40 )   
  66.     {   
  67.         if( length == 0 )   
  68.         {   
  69.             currentSelected = 0;   
  70.         }   
  71.         else{   
  72.             //当前选中索引为最后一个时   
  73.             if( currentSelected ==  length - 1 )   
  74.             {   
  75.                 //去除索引的选中颜色   
  76.                 currentSelected = 0;   
  77.                 var c = document.getElementById("suggset" + ( length - 1 )  );   
  78.                 c.className = 'suggest_link';   
  79.             }   
  80.             else  
  81.             {   
  82.                 currentSelected = currentSelected + 1;   
  83.             }      
  84.                
  85.         }   
  86.         if( null != document.getElementById("suggset" + ( currentSelected  ) ) )   
  87.         {   
  88.             /** 去除索引的选中颜色 **/  
  89.             if( currentSelected == 0)   
  90.             {   
  91.                 var c = document.getElementById("suggset" + ( currentSelected )  );   
  92.                 c.className = 'suggest_link';   
  93.             }else  
  94.             {   
  95.                 var c = document.getElementById("suggset" + ( currentSelected  - 1 )  );   
  96.                 c.className = 'suggest_link';   
  97.             }   
  98.             /** 添加索引的选中颜色**/  
  99.             var current = document.getElementById("suggset" + ( currentSelected  )  );   
  100.             current.className = "suggest_link_over";   
  101.             text.value = current.innerHTML;   
  102.         }   
  103.         return;   
  104.     }   
  105.     if( key != 38 && key != 40 )   
  106.     {   
  107.         if( "" != text.value )   
  108.         {   
  109.             //调用ajax/dwr方法   
  110.             //Suggest.getSuggest( text.value,callBack );   
  111.             var datas = new Array();   
  112.             datas[0] = "h";   
  113.             datas[1] = "ha";   
  114.             datas[2] = "hb";   
  115.             datas[3] = "hc";   
  116.             datas[4] = "hd";   
  117.             datas[5] = "he";   
  118.             callBack( datas );   
  119.                
  120.             currentSelected = -1;   
  121.             onKeySelect();   
  122.         }else{   
  123.             currentSelected = -1;   
  124.             map = null;   
  125.             noShow();   
  126.         }   
  127.     }   
  128.   
  129. }   
  130.   
  131.   
  132. /** 返回结果并显示 **/  
  133. function callBack( data )   
  134. {   
  135.     if( null != data )   
  136.     {   
  137.         document.getElementById('search_suggest').style.display = '';   
  138.         var ss = document.getElementById('search_suggest');   
  139.         ss.innerHTML = "";   
  140.         length = data.length;   
  141.         var str = "";   
  142.         var height = 10;   
  143.         for( var i = 0; i < length; i++ )   
  144.         {   
  145.             var suggest = '<div id=suggset' + i +' οnmοuseοver="javascript:suggestOver(this);" ';   
  146.             suggest += 'οnmοuseοut="javascript:suggestOut(this);" ';   
  147.             suggest += 'οnclick="javascript:setSearch(this.innerHTML);" ';   
  148.             suggest += 'class="suggest_link">' + data[i] + '</div>';   
  149.             ss.innerHTML += suggest;   
  150.             height += 22;   
  151.         }   
  152.         document.getElementById('search_suggest').style.height = height;   
  153.            
  154.     }   
  155.     else{   
  156.         document.getElementById('search_suggest').style.display = 'none';   
  157.     }   
  158.        
  159. }   
  160.   
  161. /** 使用上下键选择搜索提示**/  
  162. function onKeySelect()   
  163. {   
  164.     if( null != document.getElementById("suggset" + currentSelected ))   
  165.     {   
  166.         var current = document.getElementById("suggset" + currentSelected );   
  167.         setSearch(current.innerHTML);   
  168.     }   
  169. }   
  170.   
  171. /** 初始化 不显示div **/  
  172. function noShow()   
  173. {   
  174.     document.getElementById('search_suggest').style.display = 'none';   
  175. }   
  176. //获取鼠标   
  177. function suggestOver(div_value)    
  178. {   
  179.     currentOut = div_value;   
  180.     var current = document.getElementById("suggset" + ( currentSelected  )  );   
  181.     if( null != current )   
  182.     {   
  183.         current.className = 'suggest_link';   
  184.     }   
  185.     currentOut.className = 'suggest_link_over';   
  186.     currentSelected = -1;   
  187. }   
  188.   
  189. //失去鼠标   
  190. function suggestOut(div_value)    
  191. {   
  192.     div_value.className = 'suggest_link';   
  193. }   
  194.   
  195. //显示选中的信息   
  196. function setSearch(value)    
  197. {   
  198.     document.getElementById('search').value = value;   
  199.     document.getElementById('search_suggest').innerHTML = '';   
  200.     noShow();   
  201. }  
//搜索建议 总数
var length = 0;
//当前选中的搜索建议
var currentSelected = -1;
//获取当前鼠标所获取的行
var currentOut;

/**
*	获取搜索提示信息
**/
function getSearchContent( evt )
{
	var text = document.getElementById("search");
	var key = window.event?evt.keyCode:evt.which;
	if( null != currentOut ) 
	{
		suggestOut(currentOut);
	}
		
	//向上键
	if( key == 38 )
	{
		if( currentSelected == -1 )
		{
			currentSelected = 0;
		}
		if( length == 0 )
		{
			currentSelected = 0;
		}
		else
		{
		
			if( currentSelected == 0 )
			{
				currentSelected = length - 1 ;
				var c = document.getElementById("suggset" + ( 0 )  );
				c.className = 'suggest_link';
			}
			else{
				currentSelected = currentSelected - 1 ;
			}	
			
		}
		if( null != document.getElementById("suggset" + currentSelected ) )
		{
			/** 去除索引的选中颜色 **/
			if( currentSelected == length - 1)
			{
				var c = document.getElementById("suggset" + ( length - 1 )  );
				c.className = 'suggest_link';
			}else
			{
				var c = document.getElementById("suggset" + ( currentSelected  + 1 )  );
				c.className = 'suggest_link';
			}
			var current = document.getElementById("suggset" + currentSelected );
			current.className = "suggest_link_over";
			text.value = current.innerHTML;
		}
		return;
			
	}
	//向下键
	if( key == 40 )
	{
		if( length == 0 )
		{
			currentSelected = 0;
		}
		else{
			//当前选中索引为最后一个时
			if( currentSelected ==  length - 1 )
			{
				//去除索引的选中颜色
				currentSelected = 0;
				var c = document.getElementById("suggset" + ( length - 1 )  );
				c.className = 'suggest_link';
			}
			else
			{
				currentSelected = currentSelected + 1;
			}	
			
		}
		if( null != document.getElementById("suggset" + ( currentSelected  ) ) )
		{
			/** 去除索引的选中颜色 **/
			if( currentSelected == 0)
			{
				var c = document.getElementById("suggset" + ( currentSelected )  );
				c.className = 'suggest_link';
			}else
			{
				var c = document.getElementById("suggset" + ( currentSelected  - 1 )  );
				c.className = 'suggest_link';
			}
			/** 添加索引的选中颜色**/
			var current = document.getElementById("suggset" + ( currentSelected  )  );
			current.className = "suggest_link_over";
			text.value = current.innerHTML;
		}
		return;
	}
	if( key != 38 && key != 40 )
	{
		if( "" != text.value )
		{
			//调用ajax/dwr方法
			//Suggest.getSuggest( text.value,callBack );
			var datas = new Array();
			datas[0] = "h";
			datas[1] = "ha";
			datas[2] = "hb";
			datas[3] = "hc";
			datas[4] = "hd";
			datas[5] = "he";
			callBack( datas );
			
			currentSelected = -1;
			onKeySelect();
		}else{
			currentSelected = -1;
			map = null;
			noShow();
		}
	}

}


/** 返回结果并显示 **/
function callBack( data )
{
	if( null != data )
	{
		document.getElementById('search_suggest').style.display = '';
		var ss = document.getElementById('search_suggest');
		ss.innerHTML = "";
		length = data.length;
		var str = "";
		var height = 10;
		for( var i = 0; i < length; i++ )
		{
			var suggest = '<div id=suggset' + i +' οnmοuseοver="javascript:suggestOver(this);" ';
		    suggest += 'οnmοuseοut="javascript:suggestOut(this);" ';
		    suggest += 'οnclick="javascript:setSearch(this.innerHTML);" ';
		    suggest += 'class="suggest_link">' + data[i] + '</div>';
		    ss.innerHTML += suggest;
		    height += 22;
		}
		document.getElementById('search_suggest').style.height = height;
		
	}
	else{
		document.getElementById('search_suggest').style.display = 'none';
	}
	
}

/** 使用上下键选择搜索提示**/
function onKeySelect()
{
	if( null != document.getElementById("suggset" + currentSelected ))
	{
		var current = document.getElementById("suggset" + currentSelected );
		setSearch(current.innerHTML);
	}
}

/** 初始化 不显示div **/
function noShow()
{
	document.getElementById('search_suggest').style.display = 'none';
}
//获取鼠标
function suggestOver(div_value) 
{
	currentOut = div_value;
	var current = document.getElementById("suggset" + ( currentSelected  )  );
	if( null != current )
	{
		current.className = 'suggest_link';
	}
	currentOut.className = 'suggest_link_over';
	currentSelected = -1;
}

//失去鼠标
function suggestOut(div_value) 
{
	div_value.className = 'suggest_link';
}

//显示选中的信息
function setSearch(value) 
{
	document.getElementById('search').value = value;
	document.getElementById('search_suggest').innerHTML = '';
	noShow();
}
hld_hepeng
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值