在我们实际项目的开发中，有时候一个小小的功能，可能都需要考虑很长的时间，因为必须把这个小功尽可能的做好做到极致。我的视频网站从2018年年初做到现在，已经历经了多半年的时光。由开始的功能单一，只能实现海量视频的展示及免广告播放功能；到现在的花样繁多，除了开始的功能以外，还可以实现海量视频的搜索功能，网站的注册登录找回密码功能，发表对影视的评论及回复功能，视频的收藏功能，记录网站的访问日志功能，存储用户的登录日志功能，记录用户的搜索记录功能，记录用户的播放记录功能，实时小喇叭广播功能......。这其中有很多功能是需要登录后才可以的，因为登录后才可以为用户存储属于其自己的信息，但基础的功能无需登录也可以实现。

咳咳，扯得有点远了，今天这篇博客主要是为了记录自己今天为视频网站实现的一个新的功能，也是广大知名视频网站都拥有的一个功能（与视频的搜索相关）-----让用户在输入搜索框前弹出网站的搜索排行榜前几，输入时弹出与用户输入匹配到的指定个数视频，这样如果弹出的影视中有用户想要搜索的，便可以点击直接搜索，无需输入全部。开始先放一下其他知名网站的效果图

 在列出代码实现这个功能之前，我们先滤清思路，我们要做的所有事件操作基本就是针对输入框的。1.当输入框为空时，弹出用户的指定个数搜索历史以及本站搜索历史排行榜前八。2.当输入框不为空时，弹出用户输入内容从数据库中匹配到的搜索记录。比较了数个input事件，我在实现这个功能上，用了onfocus事件和onkeyup事件。对于如何让提示框消失，我采用了在body里面添加了ondbclick事件，在提示框出现的情况下，当用户双击整个body的任意地方，即可让已经唤醒的提示框消失。

//在body里面添加ondbclick事件，当双击body任意地方关闭搜索榜
function Close() {
	document.getElementById("info").style.display="none";
}
//用户输入提示文本框，弹出匹配到输入内容的视频以供选择，若输入为空，弹出历史搜索和搜索排行榜
function toast(nick) {
	//通过onkeyup方法实时获取用户输入的内容
	var value=document.form.v_name.value;
	value=encodeURI(encodeURI(value));//将输入内容编码
	var xmlHttp=false;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	var url="getToast.jsp?nick="+nick+"&value="+value;
	
	xmlHttp.open("get", url, true);
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			document.getElementById("info").innerHTML=xmlHttp.responseText;
			document.getElementById("info").style.display="block";
		}
	}
	xmlHttp.send();
}
//将用户选中的赋值到文本框
function fuzhi(val) {
	document.form.v_name.value=val;
}

上面是js里面写的监听事件的事件函数，其中Close()函数实现让提示框消失，在body里面的ondbclick()事件中调用了该函数，当双击body任意地方关闭搜索榜；第二个toast()函数使用了Ajax，异步向getToast.jsp传入用户输入内容和用户名，得到getToast.jsp中的提示信息并用document.getElementById("info").innerHTML=xmlHttp.responseText;将其显示到提示框，在input的onkeyup事件中调用该函数，使得每当输入框发生变化，便异步获取对应提示信息；第三个fuzhi()函数，实现当用户点击提示框中的影视记录，直接将点击的影视记录显示到输入框，便可进行搜索，不用再输入。
接下来展示getToast.jsp是怎么工作的(具体代码可参见文末CSDN地址)：

首先获取上一界面传来的value参数（用户实时输入的信息）和nick参数（用户名），并将编码过的value参数解码，至于为什么要编码和解码，大家伙可以看一下前面的博客JavaWeb解决url中中文参数乱码以及cookie中中文乱码问题，上面有详细的解释。然后再做判断，如果输入框中没有内容且用户已登录，则加载用户的指定条数的搜索历史以及本站的前八搜索排行榜，若未登录或该用户的搜索为空，则只显示前八搜索排行榜；若输入框中有输入内容，则实时异步加载在数据库中匹配到的含有输入内容的搜索记录，最终显示到提示框。

接下来展示最后的效果图

好了，今天的博客就写到这里了，感谢大家的阅读，文末附上我的视频网站553影院，欢迎访问。我在553影院等你。

本文转载至本人CSDN博客，欢迎大家前往