jsp頁面程式碼

<input id="search_input" type="text" onkeyup="test(this.value,event)" onkeypress="test3()"/>

<select  multiple="multiple" id="sel" onchange="test2()" style="width:300px;display:none;color:gray" 
</select> 

function test(keyword,event){  
		
        //定義全域性變數  
        var keyword = $("#search_input").val();   
        var sel = document.getElementById("sel"); 
        var regExp = new RegExp(keyword, "g");//建立正則表示式，g表示全域性的，如果不用g，則查詢到第一個就不會繼續向下查找了；
        $.getJSON(       
                "/blog/user/select",//url  
                "keyword="+ keyword,//傳送的資料  
                function(data){//獲取響應回來的資料  
                    document.getElementById("sel").innerHTML="";  
                   /* var arr = new Array;  
                    var arr = data.split("#");//將響應回來的資料按#拆分成陣列           
                      
                    for(var i=0;i<arr.length;i++){//迴圈每一個滿足條件的記錄  
                        //將當前迴圈滿足條件的商品名稱生成一個下拉的選項  
                        sel.options[i]=new Option(arr[i],i);  
                    }  */
                    for(var i=0;i<data.length;i++){
                    	 //將當前迴圈滿足條件的商品名稱生成一個下拉的選項  
                        sel.options[i]=new Option(data[i].blogTitle,i);
                        
                    }
                    //自動設定高度
                   sel.size=data.length;
                    //判斷是否有滿足條件的商品  
                    if(data.length>0){  
                        sel.style.display='block';  
                    }else{  
                        sel.style.display='none';  
                    }  
                    //當用戶按下上下鍵時獲取相應的值  
                    if(event.keyCode==40){  
                        sel.focus();  
                    }     
                    //搜尋到的關鍵字加粗
                    $("#sel option").each(function()//遍歷文章；
                        	{  //遍歷所有option  
                                  var txt = $(this).html();   //獲取option值 
                                  var newHtml = txt.replace(regExp, "<strong style='color:black'>"+keyword+"</strong>");//將找到的關鍵字替換，加上highlight屬性；
                                  $(this).html(newHtml);//更新文章；
                        });
                	}); 
};
      
 function test2(){  
        //輸入回車，獲取輸入框內容焦點  
       /* $("#sel").keypress(function(){  
                $("#search_input").focus();  
                $("#sel").css("display","none");  
        }); */ 
         //雙擊，獲取輸入框內容焦點  
         $("#sel").click(function(){  
             $("#search_input").focus();  
             $("#sel").css("display","none");
            /* var keyword=$("#search_input").val();
             location.href="/blog/user/search?searchid="+keyword;*/
         });  
         //將選中的下拉列表中的內容新增到輸入框中  
        $("#search_input").val($("option:selected").text());
        
    }   
 

//搜尋下拉框內容
	@RequestMapping("/select")
	public void searchSelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{
		//ajax處理頁面禁用快取  
        resp.setHeader("Content-type", "text/html;charset=utf-8");  
        resp.setHeader("expirs", "mon,26jul199705:00:00gmt");  
        resp.setHeader("cache", "no-cache,must-revalidate");  
        resp.setHeader("pragma", "no-cache");  
        //是設定字符集  
        req.setCharacterEncoding("utf-8");  
        //獲取傳值，搜尋包含關鍵字 的內容
        
        String keyword = new String(req.getParameter("keyword").getBytes("iso-8859-1"),"utf-8");
      //  System.out.println(keyword);
        if(keyword!=null && !keyword.equals("")){
        List<Blog>searchList=blogService.getSelectSearchPage(keyword);
        //把list實體封裝到json物件中
        JSONArray jArray=JSONArray.fromObject(searchList);
        //向客戶端輸出json物件
       resp.getWriter().write(jArray.toString());
        }
       else {
		resp.getWriter().write(0);
	}
	}