在我们实际项目的开发中，有时候一个小小的功能，可能都需要考虑很长的时间，因为必须把这个小功尽可能的做好做到极致。我的视频网站从2018年年初做到现在，已经历经了多半年的时光。由开始的功能单一，只能实现海量视频的展示及免广告播放功能；到现在的花样繁多，除了开始的功能以外，还可以实现海量视频的搜索功能，网站的注册登录找回密码功能，发表对影视的评论及回复功能，视频的收藏功能，记录网站的访问日志功能，存储用户的登录日志功能，记录用户的搜索记录功能，记录用户的播放记录功能，实时小喇叭广播功能......。这其中有很多功能是需要登录后才可以的，因为登录后才可以为用户存储属于其自己的信息，但基础的功能无需登录也可以实现。
咳咳，扯得有点远了，今天这篇博客主要是为了记录自己今天为视频网站实现的一个新的功能，也是广大知名视频网站都拥有的一个功能（与视频的搜索相关）-----让用户在输入搜索框前弹出网站的搜索排行榜前几，输入时弹出与用户输入匹配到的指定个数视频，这样如果弹出的影视中有用户想要搜索的，便可以点击直接搜索，无需输入全部。开始先放一下其他知名网站的效果图
在列出代码实现这个功能之前，我们先滤清思路，我们要做的所有事件操作基本就是针对输入框的。1.当输入框为空时，弹出用户的指定个数搜索历史以及本站搜索历史排行榜前八。2.当输入框不为空时，弹出用户输入内容从数据库中匹配到的搜索记录。比较了数个input事件，我在实现这个功能上，用了onfocus事件和onkeyup事件。对于如何让提示框消失，我采用了在body里面添加了ondbclick事件，在提示框出现的情况下，当用户双击整个body的任意地方，即可让已经唤醒的提示框消失。
<form name="form" action="/search.jsp" method="post" target="_blank">
<input type="text" onfocus="toast()" onkeyup="toast()" class="input" placeholder="尽
情搜吧" name="v_name">
<input type="submit" class="search" value='搜索'>
</form>
<div id="info" style="display:none;color: white">
</div>//在body里面添加该事件，当双击body任意地方关闭搜索榜
function Close() {
document.getElementById("info").style.display="none";
}
//用户输入文本框，弹出匹配到输入内容的视频以供选择
function toast() {
//通过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是怎么工作的：
<%
String value=request.getParameter("value");
value=URLDecoder.decode(value, "utf-8");
String nick=request.getParameter("nick");
if(value.isEmpty()){//如果输入框为空，则加载历史搜索和搜索榜
//对已登录用户，从数据库（或cookie）加载其搜索记录
if(!nick.equals("")){//已登录用户则加载历史搜索
String sea="select * from srecord where s_Searcher='"+nick+"'";
ArrayList<SearchBean> sbs= UtilDao.getSearchRecord(sea);
if(sbs.size()>0){
%>历史搜索：<br><%
for(SearchBean sb:sbs){//每两个换行
String c=sb.getContent();
String t=sb.getTime();
%>
<font color="black"><span onclick="fuzhi('<%=c%>')"><%=c%></span>
<%
}
}
}
//加载搜索记录排行榜
String seaAll="select * from srecord order by s_Id desc limit 0,8";
ArrayList<SearchBean> sbsa= UtilDao.getSearchRecord(seaAll);
int xu=1;
if(sbsa.size()>10){
for(SearchBean sb:sbsa){
String c=sb.getContent();
String t=sb.getTime();
if(xu<4){
%>
<p onclick="fuzhi('<%=c%>')"><font color="red"><%=xu %> </font><%=c%></p><br>
<%
}else{
%>
<p onclick="fuzhi('<%=c%>')"><font color="black"><%=xu %> </font><%=c%></p><br>
<%
}
xu++;
}
}
%>
<br><br><p onclick="fuzhi('创业时代')"><font color="red">1</font> 创业时代</p><br>
<p onclick="fuzhi('斗破苍穹')"><font color="red">2</font> 斗破苍穹</p><br>
<p onclick="fuzhi('解忧杂货店')"><font color="red">3</font> 解忧杂货店</p><br>
<p onclick="fuzhi('硬汉2')"><font color="black">4</font> 硬汉2</p><br>
<p onclick="fuzhi('巨齿鲨')"><font color="black">5</font> 巨齿鲨</p><br>
<p onclick="fuzhi('如懿传')"><font color="black">6</font> 如懿传</p><br>
<p onclick="fuzhi('许你浮生若梦')"><font color="black">7</font> 许你浮生若梦</p><br>
<p onclick="fuzhi('快乐星球')"><font color="black">8</font> 快乐星球</p>
<%
}
else{//输入框不为空，则根据输入框加载出匹配到的提示条目
String seaAll="select * from srecord where s_Content like '%"+value+"%';";
ArrayList<SearchBean> sbsa= UtilDao.getSearchRecord(seaAll);
int xu=1;
for(SearchBean sb:sbsa){
String c=sb.getContent();
String t=sb.getTime();
%>
<p onclick="fuzhi('<%=c%>')"><font color="black"><%=xu %> </font><%=c%></p><br>
<%
xu++;
}
}
%>首先获取上一界面传来的value参数（用户实时输入的信息）和nick参数（用户名），并将编码过的value参数解码，至于为什么要编码和解码，大家伙可以看一下前面的博客JavaWeb解决url中中文参数乱码以及cookie中中文乱码问题，上面有详细的解释。然后再做判断，如果输入框中没有内容且用户已登录，则加载用户的指定条数的搜索历史以及本站的前八搜索排行榜，若未登录或该用户的搜索为空，则只显示前八搜索排行榜；若输入框中有输入内容，则实时异步加载在数据库中匹配到的含有输入内容的搜索记录，最终显示到提示框。
接下来展示最后的效果图
