java簡單的實現搜索框的下拉顯示相關搜索功能

最近做了一個簡單的搜索框下面下拉顯示相關搜索的功能，有點模仿百度的下拉展示相關搜索

　　先上個展示圖 ： 點擊進入演示地址，大家可以輸入長點的搜索，點擊搜索，再輸入之前搜索詞的前面部分，看是否能展示出來

　　搜索框相關搜索的展示很簡單，就是根據你的搜索詞，去數據庫中匹配，是否有類似的搜索詞存在，按照搜索詞被搜索的次數進行排序顯示出來

我設計的是每次搜索一個詞，提交之后都會去數據庫進行查詢，看是否存在這個搜索詞的搜索，若存在，則對數據庫中的這個搜索詞對象進行次數加1，不存在，則創建這個新搜索詞對象，保存在數據庫中，定義搜索次數為1

　　每次提交搜索都會將搜索詞進行保存或次數加1，方便下次顯示相關搜索

public String soso(){
        if(search!=null){
            searchBiz.addSearch(search);//存儲搜索對象或對搜索對象的搜索次數+1
        }
        return "soso";
    }
    public String getRelativeSearch() throws UnsupportedEncodingException{//根據搜索詞內容得到相關的搜索對象
        content = URLDecoder.decode(content,"utf-8");//url解碼，將其還原成中文等內容
        String ss = content.replaceAll("(?s)(.)(?=.*\\1)", "");//這個方法是網上查的，刪除字符串里面重復出現的字符內容，我在這邊設計，主要就是為了排除%的影響，會匹配到所有內容
        if(content!=null&&!content.equals("")&&!ss.equals("%")){//即如果搜索詞全部是由百分號組成，則去查詢相關的搜索詞
            searchs = searchBiz.getRelativeSearch(content);//得到相關的搜索詞對象，最多顯示10個
        }
        return "searchs";
    }

　　還有就是頁面上方法的監聽，在什么時候會顯示下拉框內容，什么時候會隱藏下拉框內容，我簡單參考了下百度的設計，並用自己的方法實現，可能真實設計上會有出入。一開始，我設計的是onchange監聽，但發現onchange只有在失去焦點並且改變內容才會觸發，后來改為了onkeyup來監聽搜索框的內容，即鍵盤釋放后，去數據庫查詢得到相關的搜索詞對象。

<body class="index">
    <div class="searchbox ">
        <div class="search w652 center">
          <form  name="formsearch" method="post" action="<c:url value="/SearchAction_soso.action"/>">
            <div class="form">
                <div class="form_left">
                    <!-- 搜索框 -->
                    <div class="form_right">
                      <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)" />
                      <button type="submit" class="search-submit" >搜索</button>
                    </div>
                    <!-- 下拉框 -->
                    <ul id="hotwords" class="hotwords">
                        
                    </ul>
                </div>
            </div>
          </form>
           </div>
    </div>
  </body>

　　在js中通過ajax實現和后台的交互，得到查詢出來的search對象

relativeS:function(){
        var input = document.getElementById("search-keyword");
        var content = input.value;
        content= encodeURI(encodeURI(content));//URI編碼轉換
        Ajax.sendRequest("post","url","content="+content,this.relativefun)
    },
    relativefun:function(p){
        var searchs = JSON.parse(p.text);
        var ul = document.getElementById("hotwords");
        //得到相關搜索的搜索對象並進行操作，生成對象加載到頁面中
        if(searchs!=null&&searchs.length>0){
            ul.style.display = "block";
            $("#hotwords li").remove();//移除之前生成的li相關搜索
            for(var i=0;i<searchs.length;i++){
                var li = document.createElement("li");
                
                li.innerHTML = searchs[i].content;
                li.onclick = function onclick(){
                    Search.choosecontent(this);
                }
                ul.appendChild(li);
            }
        }else{
            ul.style.display = "none";
        }
    },
    choosecontent:function(e){
        var input = document.getElementById("search-keyword");
        var ul = document.getElementById("hotwords");
        input.value = e.innerHTML;
        ul.style.display = "none";
    },
    //搜索框丟失焦點，下拉框也會消失
    hiddenhot:function(){
        var ul = document.getElementById("hotwords");
        ul.style.display = "none";
    }

　　點擊進入演示地址，大家可以輸入長點的搜索，點擊搜索，再輸入之前搜索詞的前面部分，看是否能展示出來