视频网站开发：Ajax异步实现搜索输入框的提示功能

曾经终败给现在 2022-04-21 23:24 239阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1][]

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

//在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){
 					%>历史搜索： <%
 					for(SearchBean sb:sbs){//每两个换行
 						String c=sb.getContent();
 						String t=sb.getTime();
 						%>
 						 ')"><%=c%>
 						<%
 					}
 					
 				}
 	 	}
 			
 			//加载搜索记录排行榜
 			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){
 						%>
 		 		 ')"><%=xu %> <%=c%> 
 						<%
 					}else{
 						%>
 		 		 ')"><%=xu %> <%=c%> 
 						<%
 					}
 					
 					xu++;
 				}
 				
 			}
 			%>
 	 	 1 创业时代 
 			2 斗破苍穹 
 			3 解忧杂货店 
 			4 硬汉2 
 			5 巨齿鲨 
 			6 如懿传 
 			7 许你浮生若梦 
 			8 快乐星球 
 	 <%
 }
 
 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();
 			%>
 		 ')"><%=xu %> <%=c%> 
 			<%
 			xu++;
 		}
 }
 %>

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

接下来展示最后的效果图

![20181031200727626.png][]![20181031200811439.png][]![20181031200833452.png][]

好了，今天的博客就写到这里了，感谢大家的阅读，文末附上我的网站[哆啦网][Link 1]，欢迎访问。我在[哆啦网][Link 1]等你。

[Link 1]: http://www.duola.vip/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181031203444528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20220422/9162818116724cb3b1c32fa00116e70a.png
[JavaWeb_url_cookie]: https://blog.csdn.net/qq_35750547/article/details/83277983
[20181031200727626.png]: https://img-blog.csdnimg.cn/20181031200727626.png
[20181031200811439.png]: https://img-blog.csdnimg.cn/20181031200811439.png
[20181031200833452.png]: /images/20220422/b23cadc9146748bea3ad27d686518c89.png