最近做了一個簡單的搜索框下面下拉顯示相關搜索的功能，有點模仿百度的下拉展示相關搜索
先上個展示圖 ： 點擊進入演示地址，大家可以輸入長點的搜索，點擊搜索，再輸入之前搜索詞的前面部分，看是否能展示出來
搜索框相關搜索的展示很簡單，就是根據你的搜索詞，去數據庫中匹配，是否有類似的搜索詞存在，按照搜索詞被搜索的次數進行排序顯示出來
我設計的是每次搜索一個詞，提交之后都會去數據庫進行查詢，看是否存在這個搜索詞的搜索，若存在，則對數據庫中的這個搜索詞對象進行次數加1，不存在，則創建這個新搜索詞對象，保存在數據庫中，定義搜索次數為1
每次提交搜索都會將搜索詞進行保存或次數加1，方便下次顯示相關搜索
1 public String soso(){ 2 if(search!=null){ 3 searchBiz.addSearch(search);//存儲搜索對象或對搜索對象的搜索次數+1 4 } 5 return "soso"; 6 } 7 public String getRelativeSearch() throws UnsupportedEncodingException{//根據搜索詞內容得到相關的搜索對象 8 content = URLDecoder.decode(content,"utf-8");//url解碼，將其還原成中文等內容 9 String ss = content.replaceAll("(?s)(.)(?=.*\\1)", "");//這個方法是網上查的，刪除字符串里面重復出現的字符內容，我在這邊設計，主要就是為了排除%的影響，會匹配到所有內容 10 if(content!=null&&!content.equals("")&&!ss.equals("%")){//即如果搜索詞全部是由百分號組成，則去查詢相關的搜索詞 11 searchs = searchBiz.getRelativeSearch(content);//得到相關的搜索詞對象，最多顯示10個 12 } 13 return "searchs"; 14 }
還有就是頁面上方法的監聽，在什么時候會顯示下拉框內容，什么時候會隱藏下拉框內容，我簡單參考了下百度的設計，並用自己的方法實現，可能真實設計上會有出入。一開始，我設計的是onchange監聽，但發現onchange只有在失去焦點並且改變內容才會觸發，后來改為了onkeyup來監聽搜索框的內容，即鍵盤釋放后，去數據庫查詢得到相關的搜索詞對象。
1 <body class="index"> 2 <div class="searchbox "> 3 <div class="search w652 center"> 4 <form name="formsearch" method="post" action="<c:url value="/SearchAction_soso.action"/>"> 5 <div class="form"> 6 <div class="form_left"> 7 <!-- 搜索框 --> 8 <div class="form_right"> 9 <input onkeyup="Search.relativeS()" autocomplete="off" name="search.content" type="text" class="search-keyword" id="search-keyword" value="輸入搜索關鍵詞，回車搜索" onfocus="if(this.value=='輸入搜索關鍵詞，回車搜索'){this.value='';};Search.relativeS()" onblur="if(this.value==''){this.value='輸入搜索關鍵詞，回車搜索'};setTimeout(Search.hiddenhot,100)" /> 10 <button type="submit" class="search-submit" >搜索</button> 11 </div> 12 <!-- 下拉框 --> 13 <ul id="hotwords" class="hotwords"> 14 15 </ul> 16 </div> 17 </div> 18 </form> 19 </div> 20 </div> 21 </body>
在js中通過ajax實現和后台的交互，得到查詢出來的search對象
1 relativeS:function(){ 2 var input = document.getElementById("search-keyword"); 3 var content = input.value; 4 content= encodeURI(encodeURI(content));//URI編碼轉換 5 Ajax.sendRequest("post","url","content="+content,this.relativefun) 6 }, 7 relativefun:function(p){ 8 var searchs = JSON.parse(p.text); 9 var ul = document.getElementById("hotwords"); 10 //得到相關搜索的搜索對象並進行操作，生成對象加載到頁面中 11 if(searchs!=null&&searchs.length>0){ 12 ul.style.display = "block"; 13 $("#hotwords li").remove();//移除之前生成的li相關搜索 14 for(var i=0;i<searchs.length;i++){ 15 var li = document.createElement("li"); 16 17 li.innerHTML = searchs[i].content; 18 li.onclick = function onclick(){ 19 Search.choosecontent(this); 20 } 21 ul.appendChild(li); 22 } 23 }else{ 24 ul.style.display = "none"; 25 } 26 }, 27 choosecontent:function(e){ 28 var input = document.getElementById("search-keyword"); 29 var ul = document.getElementById("hotwords"); 30 input.value = e.innerHTML; 31 ul.style.display = "none"; 32 }, 33 //搜索框丟失焦點，下拉框也會消失 34 hiddenhot:function(){ 35 var ul = document.getElementById("hotwords"); 36 ul.style.display = "none"; 37 }
點擊進入演示地址，大家可以輸入長點的搜索，點擊搜索，再輸入之前搜索詞的前面部分，看是否能展示出來