在我們實際項目的開發中，有時候一個小小的功能，可能都需要考慮很長的時間，因爲必須把這個小功儘可能的做好做到極致。我的視頻網站從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中中文亂碼問題，上面有詳細的解釋。然後再做判斷，如果輸入框中沒有內容且用戶已登錄，則加載用戶的指定條數的搜索歷史以及本站的前八搜索排行榜，若未登錄或該用戶的搜索爲空，則只顯示前八搜索排行榜；若輸入框中有輸入內容，則實時異步加載在數據庫中匹配到的含有輸入內容的搜索記錄，最終顯示到提示框。
接下來展示最後的效果圖
好了，今天的博客就寫到這裏了，感謝大家的閱讀，文末附上我的網站哆啦網，歡迎訪問。我在哆啦網等你。