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

最新推荐文章于 2022-02-25 18:19:43 发布

longhuiping

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量117

点赞数

分类专栏： js 文章标签： Google C C++ C# Ajax

本文链接：https://blog.csdn.net/longhuiping/article/details/83633376

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以前一直在用ajax实现异步调用,但一直没有时间到带有搜索提示的功能，前几天由于工作需要，终于写了一个，整理了一下代码，我使用的技术是js+dwr2.0,在下面的js中只需要调用一个后台的方法即可.为了更好的演示，所以用一个数组代替。
注:其中部分代码不是原创，但是忘了从哪down下来的了，找了半天，很郁闷，没找到，请原作者多多见谅！对了，偶弄了个附件，呵呵！
suggest.html中的代码,很简单


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 搜索提示</title>
<script language="javascript" src="suggest.js"></script>
<link  type="text/css" rel="stylesheet"  href="suggest.css" />
</head>

<body onload="noShow();">
	<table>
    	<tr>
        	<td>
            	<input type="text" id="search"  onkeyup="javascript:getSearchContent(event);"/><br/>
            </td>
        </tr>
        <tr>
        	<td>
            	  <div id="search_suggest" style="width:525;left:445"></div>
            </td>
        </tr>
    </table>
</body>
</html>

suggest.css代码，down下来的


@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的但是大部分是自己的心血，呵呵！


//搜索建议 总数
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 +' onmouseover="javascript:suggestOver(this);" ';
		    suggest += 'onmouseout="javascript:suggestOut(this);" ';
		    suggest += 'onclick="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();
}

longhuiping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现类似于google,baidu的搜索提示功能，带有上下键选择功能

以前一直在用ajax实现异步调用,但一直没有时间到带有搜索提示的功能，前几天由于工作需要，终于写了一个，整理了一下代码，我使用的技术是js+dwr2.0,在下面的js中只需要调用一个后台的方法即可.为了更好的演示，所以用一个数组代替。注:其中部分代码不是原创，但是忘了从哪down下来的了，找了半天，很郁闷，没找到，请原作者多多见谅！对了，偶弄了个附件，呵呵！suggest.html中的代码...
复制链接

扫一扫